problem description
use VUE.set to update data, but the page still has no real-time response
the environmental background of the problems and what methods you have tried
at first, the value was assigned directly with the index, and the page did not respond. After checking that it should be modified with VUE.set, we can confirm that the data has been updated, but the page is still not updated in real time
.related codes
/ / Please paste the code text below (do not replace the code with pictures)
<FormItem v-for="(item, index) in formValidate.items" v-if="item.status" :key="index" :label="" "" :prop=""items." + index + ".value"" :rules="{required: true, message: " " + item.index +" ", trigger: "blur"}">
<Row>
<Col span="2">
<Input style="width:80%;" type="text" v-model="item.number" placeholder=""></Input>
</Col>
<Col span="19">
<Input type="text" v-model="item.value" placeholder=""></Input>
</Col>
<Col span="2" offset="1">
<Button @click="handleRemove(index)"></Button>
</Col>
</Row>
</FormItem>
<FormItem>
<Row>
<Col span="3">
<Button type="dashed" long @click="handleAdd" icon="md-add"></Button>
</Col>
</Row>
</FormItem>
import Vue from "vue"
export default {
data() {
return {
formValidate: {
items: [{
value: "",
number: "",
index: 1,
status: 1
}],
options: {
// value: "",
number: "",
status: 1
},
},
}
},
handleRemove(index) {
Vue.set(this.formValidate.items[index], "status", 0);
},
handleAdd() {
var itemLen=this.formValidate.items.length;
this.$set(this.formValidate.items, itemLen, {
value: "",
index: itemLen,
status: 1
});
},what result do you expect? What is the error message actually seen?
all the information found says that it can be solved with VUE.set, but it can not be solved. Which god can give us some advice?