我试图了解如何正确地观察一些道具变异.我有一个父组件(.vue文件)从ajax调用接收数据,将数据放入一个对象并使用它通过v-for指令呈现一些子组件,简化我的实现:
<template>
<div>
<player v-for="(item, key, index) in players"
:item="item"
:index="index"
:key="key"">
</player>
</div>
</template>
...然后在<script>标签内:
data(){
return {
players: {}
},
created(){
let self = this;
this.$http.get('../serv/config/player.php').then((response) => {
let pls = response.body;
for (let p in pls) {
self.$set(self.players, p, pls[p]);
}
});
}
item对象是这样的:
item:{
prop: value,
someOtherProp: {
nestedProp: nestedValue,
myArray: [{type: "a", num: 1},{type: "b" num: 6} ...]
},
}
现在,在我的孩子"玩家"组件中,我正在尝试观察任何Item的属性变化,我使用:
...
watch:{
'item.someOtherProp'(newVal){
//to work with changes in "myArray"
},
'item.prop'(newVal){
//to …我有一个像这样的vue对象:
var vm = new Vue({
el: '#app',
data: {
items: [],
index: 0
},
});
内部项目数组我将推送项目,如:
item1 = {
a: 1,
b: 'type',
c: '3.556'
}
...
itemN = {
a: n,
b: 'type',
c: '5.226'
}
然后我会更新项目的"c"属性之一,我想设置一个观察者,一旦这个属性发生变化就会发出警告.
编辑:我也想知道女巫项目已经改变
我正在使用vue.js 2.5.2
我有一个对象数组，我想观看forms [*]。selected，如果它发生更改，请调用一个函数。
这是我的尝试，但显然不正确。我尝试将数组放入for循环中，以观察每个对象的选定属性。
watch: {
for (var i = 0; i < forms.length; i++) {
forms[i].selected: function(){
console.log("change made to selection");
}
}
},
这是称为Forms []的对象数组
forms: [
{
day: '12',
month: '9',
year: '2035',
colors: 'lightblue',//default colour in case none is chosen
selected: true
},
{
day: '28',
month: '01',
year: '2017',
colors: 'lightgreen',//default colour in case none is chosen
selected: true
}
],
任何帮助将不胜感激，
谢谢
如何编写 Vue 2.x 指令以检测模型中的更改？我只能绑定到元素并检测输入、按键等。但是我无法检测模型何时更新。这是否超出了 Vue 指令的范围？
Vue.directive('text-validation', {
bind: function (el, binding, vnode) {
el.addEventListener('input', function(){
console.log('only gets called on input, not model updates');
});
}
});
new Vue({
el: '#app',
data: {
text: 'testing...'
},
mounted: function() {
setTimeout(function(){
this.text = 'detected change';
}.bind(this), 2000)
}
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="app">
<input v-model="text" v-text-validation=""/>
</div>我想使用Vue渲染一个包含行的表,但是将单元格作为一个组件.
我已经做了一个我希望看到的最终结果的例子,并且有一些代码与我认为我可以解决这个问题有关:
HTML
<div id="app">
<table>
<thead>
<tr>
<th>Row</th>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rindex) in people">
<td>{{ rindex }}</td>
<cell v-for="(value, vindex, rindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell>
</tr>
</tbody>
</table>
<template id="template-cell">
<td>{{ value }}</td>
</template>
</div>
JS
// Register component
Vue.component('cell', {
template: '#template-cell',
name: 'row-value',
props: ['value', 'vindex', 'rindex']
// In here I would like to access value, vindex and rindex
});
// Start application
new Vue({
el: '#app', …