我可以对 v-model 使用条件操作吗？答案

【问题标题】：Can I use conditional operations with v-model?我可以对 v-model 使用条件操作吗？
【发布时间】：2019-03-12 06:17:59
【问题描述】：

我想要实现的是一个有条件地处理新输入或旧输入（编辑）的组件。我试过这个，灵感来自question：

<input type="text" placeholder="New Event" v-model="event.title ? event.title : title" required/>

甚至

<input type="text" placeholder="New Event" v-model="event.title || title" required/>

但两者都不起作用。我在控制台中收到错误。

event.title来自道具event；

title是数据对象中的一个属性，值为''。

在 Vue 2 中，我需要构建 2 个单独的组件吗？一个用于新输入，另一个用于编辑？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

我认为你可以使用computed 来达到这个目的，如下所示：

<input type="text" placeholder="New Event" v-model="nameOfMethod" required/>

在computed 方法中使用您的逻辑创建nameOfMethod，如下所示：

computed:{
    nameOfMethod(){
        if (this.event.title  === "")
            return this.title;
        else
            return this.event.title;
    },

}

【讨论】：

不幸的是，这不起作用。计算属性将返回输入的初始值，但输入将无法通过v-model 更新变量。
@tony19 “输入将无法导致变量更新.. ”是什么意思？如果他通过event.title，我认为他无论如何都不会更新它
v-model 的目的是允许属性的双向绑定。见docs。
@Thamerbelfkih 我同意 tony19 cz 我之前也尝试过，但没有成功

【解决方案2】：

你可以试试这个，它对我有用：

  <td>
    <div v-if="event">
      <input v-model="event.title">
    </div>
    <div v-else><input v-model="title"></div>
  </td>

【讨论】：