使用VUE.set更新数据,页面依然没有实时响应

新手上路,请多包涵

问题描述

使用VUE.set更新数据,页面依然没有实时响应

问题出现的环境背景及自己尝试过哪些方法

刚开始直接用索引赋值,页面没有响应,查到应该用VUE.set,修改以后可以确定数据更新了,但是页面依然没有实时更新

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

<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
      });
    },

你期待的结果是什么?实际看到的错误信息又是什么?

查到的信息都说用VUE.set就可以解决,可以不行啊,哪位大神可以指点一下?

阅读 5.5k
2 个回答
this.$set(this.formValidate.items[index], 'status', 0);
  1. 删除的那个方法,我觉得直接永等号就可以的
  2. 添加的方法,用js的push方法就可以的
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题