Question

我想将v-model设置为由v-for循环中的值指定的值。这是我的代码：

<tr v-for="campaign in _campaigns">
    <el-switch v-model="campaign.enabled"></el-switch>
</tr>

现在如果campaign.enabled === 'active'我想将v-model设置为on，或者如果是campaign.enabled === 'inactive'而不是off。

我试图通过以下几种方式为v-model添加逻辑： v-model="campaign.enabled === 'active' ? on : off"或使用方法但没有效果。知道什么会被认为是实现这一目标的最佳实践吗？

Answer 1

v-model需要能够分配给它的参数并读取它的值。它期望接收和分配的值是布尔值。由于您希望将这些转换为字符串，因此您需要使用方法对值进行编码和转换，并且需要将v-model分隔为其组件value和on:input绑定。< / p>

＆＃13 ;

＆＃13;

new Vue({
  el: '#app',
  data: {
    campaigns: [{
      enabled: 'active'
    }]
  },
  methods: {
    decodeCampaign(c) {
      return c.enabled === 'active';
    },
    encodeCampaign(b) {
      return b ? 'active' : 'inactive';
    }
  }
});

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.0/index.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.0/theme-default/index.css" rel="stylesheet" />
<div id="app">
  <div v-for="campaign in campaigns">
    <el-switch :value="decodeCampaign(campaign)" @input="(v) => campaign.enabled = encodeCampaign(v)"></el-switch>
    {{campaign.enabled}}
  </div>
</div>

＆＃13;

如果您没有数组，可以使用编码和解码来实现可设置的计算，并使用v-model，但是没有好的方法来计算对于数组的每个元素。

Answer 2

试试这个：

<tr v-for="campaign in _campaigns">
    <el-switch v-model="campaign.enabled === 'active'"></el-switch>
</tr>

docs说你必须为v模型提供一个布尔值： http://element.eleme.io/#/en-US/component/switch1

Answer 3

指令v-model仅限于输入类型

<input>
<select>
<textarea>
和vue组件

https://vuejs.org/v2/api/#v-model

因此，bool值适用于您无法设置的<input type="radio" ...>和type="checkbox"

将v-model设置为on

您只能将输入设置为已选中或未选中。如果要禁用或隐藏组件，请使用v-if或v-show。

您正尝试在组件上使用v-model，因此您应该阅读此https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events或https://vuejs.org/v2/guide/forms.html#v-model-with-Components。在大多数情况下，我认为在组件中使用道具将是更好的解决方案。因为v-model是标准的双向绑定指令。

VueJS动态v模型值

3 个答案: