我有我的PHP代码,我确实有一些变量
$checked = true;
而我正在写这样的东西
<input v-model="subscribed" type="checkbox" <?= ($checked ? 'checked' : '') ?> />
现在在我的vue js文件中,如何使用此检查数据填充我的模型
subscribed 具有真或假的价值.(我不打算通过PHP代码直接为js赋值,我需要在其中设置它/在输入中自己不在其他地方)
请检查代码段.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<label>
<input id='sub' v-model="subscribed" @click="printState" type="checkbox" checked />
Subscription
</label>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
subscribed: false,
// subscribed: sub.checked
// ^ this works but i dont want to add everytime id and get its value manually
}
},
created: function() {
var self = this;
setTimeout(function() {
console.log('Checkbox is having its initial value true/checked');
console.log(self.subscribed);
}, 1000)
},
methods: {
printState: function(){
console.log(this.subscribed)
}
}
});
</script>
</body>你现在可以看到我必须在数据中添加模型变量subscribed但是我还需要提供它的值,如果我提供它的值,那么它将覆盖它的实际值(所以为了使它工作我设置它最初从DOM元素值它自己{ sub.checkedsub是由dom.getelembyid提取的dom元素...}但我不喜欢这样,因为会有更多的元素(文本|选择|无线电)等.)
那么有什么方法(优雅的方式)subscribed会从输入中自动选择其值.
Vue真的不是设计初始化的HTML,但是,一种方法是使用指令来init表示值.这与Angular的想法基本相同ng-init:
Vue.directive('init', {
bind: function(el, binding, vnode) {
vnode.context[binding.arg] = binding.value;
}
});
这基本上是需要绑定的说法,这是名称的冒号后面(见下文),并将其设置在Vue公司的实例,然后你就可以作为使用给定值:
<input v-model="subscribed" type="checkbox" v-init:subscribed="<?=($checked) ? 'true' : 'false'?>" />
但有一点需要注意,首先你仍然需要预先声明你的数据属性,它不会动态地注入它们,其次所有的东西都被评估为JavaScript,所以如果你想用字符串初始化它需要用单引号括起来最后,它会不理解camelCase,所以如果你想设置camelCase数据属性,你需要写一个kebab-case以camelCase在该指令转换.
这是JSFiddle中更新的代码片段:https://jsfiddle.net/evnctym1/
这不符合Vue的精神，因为在可行时您应该在模板之外具有逻辑，但是这是一个聪明的解决方法，在大多数情况下都可以使用
<input
v-model="foobar"
:run="!foobar ? foobar = 1 : true"
/>
:run不是特殊属性，而是完全任意的。我用它来定义我正在v建模的值。
就我而言，这很有用，因为我需要对尚不存在索引的数组的索引进行v-model。模板正在创建对其进行v模型建模的索引。我建议您不要采用上述解决方法，并建议您进行全面测试（如果将其用于潜在的副作用），但这将使您可以在模板中内联初始化一个值。
| 归档时间： |
|
| 查看次数： |
10736 次 |
| 最近记录： |