[英]VueJS dynamic v-model value
I want to set v-model
to a value dictated by the value in my v-for
loop.我想将
v-model
设置为由我的v-for
循环中的值指定的值。 here's my code:这是我的代码:
<tr v-for="campaign in _campaigns">
<el-switch v-model="campaign.enabled"></el-switch>
</tr>
now if campaign.enabled === 'active'
i want to set v-model to on , or if现在如果
campaign.enabled === 'active'
我想将 v-model 设置为 on ,或者如果campaign.enabled === 'inactive'
than off. campaign.enabled === 'inactive'
比关闭。
i tried to add logic to v-model in few ways like: v-model="campaign.enabled === 'active' ? on : off"
or to use a method but none worked.我尝试通过以下几种方式向 v-model 添加逻辑:
v-model="campaign.enabled === 'active' ? on : off"
或使用一种方法但没有奏效。 Any idea what will consider as best practice to achieve that?知道什么是实现这一目标的最佳实践吗?
v-model
needs to be able to assign to its argument as well as read its value. v-model
需要能够分配给它的参数以及读取它的值。 The values it expects to receive and assign are booleans.它期望接收和分配的值是布尔值。 Since you want to convert those to strings you will need to have methods to encode and convert the values, and you will need to separate the
v-model
into its component value
and on:input
bindings.由于您想将它们转换为字符串,因此您需要具有编码和转换值的方法,并且您需要将
v-model
分离为其组件value
和on:input
绑定。
new Vue({ el: '#app', data: { campaigns: [{ enabled: 'active' }] }, methods: { decodeCampaign(c) { return c.enabled === 'active'; }, encodeCampaign(b) { return b ? 'active' : 'inactive'; } } });
<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>
If you didn't have an array, you could use the encode and decode to implement a settable computed, and use v-model
with it, but there's no good way to make a computed for each element of your array.如果你没有数组,你可以使用编码和解码来实现一个可设置的计算,并使用
v-model
,但是没有很好的方法来为你的数组的每个元素进行计算。
Try this:尝试这个:
<tr v-for="campaign in _campaigns">
<el-switch v-model="campaign.enabled === 'active'"></el-switch>
</tr>
docs says you have to provide an boolean to the v-model: http://element.eleme.io/#/en-US/component/switch1文档说你必须为 v-model 提供一个布尔值:http: //element.eleme.io/#/en-US/component/switch1
The directive v-model
is limited to the input types指令
v-model
仅限于输入类型
<input>
<select>
<textarea>
https://v2.vuejs.org/v2/api/#v-model https://v2.vuejs.org/v2/api/#v-model
So a bool value will work for <input type="radio" ...>
and type="checkbox"
you cannot set所以 bool 值适用于
<input type="radio" ...>
和type="checkbox"
你不能设置
set v-model to on
将 v-model 设置为 on
you can only set an input to checked or unchecked.您只能将输入设置为选中或未选中。 If you want to disable or hide the component use
v-if
or v-show
.如果要禁用或隐藏组件,请使用
v-if
或v-show
。
You are trying to use v-model on a component, so you should read this https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events or https://v2.vuejs.org/v2/guide/forms.html#v-model-with-Components .您正在尝试在组件上使用 v-model,因此您应该阅读此https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events或https:// /v2.vuejs.org/v2/guide/forms.html#v-model-with-Components 。 In most cases i think using props in the component would be the better solution.
在大多数情况下,我认为在组件中使用道具会是更好的解决方案。 Because v-model is the standard two way binding directive.
因为 v-model 是标准的双向绑定指令。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.