您好,匿名用户

vue中data数据无法同步到视图的问题?

0 投票

我预实现的效果是:
根据pushData数据自动创建表单
并根据每个表单的不同绑定不同的方法,比如手机表单可以做到验证号码,姓名表单可以验证姓名规则等等
目前遇到一个问题,就是在手机表单中通过输入触发iserr属性,无法同步到视图显示

请问这是什么原因导致的呢?

我的的代码如下:

<template>
  <div id="app">
    <ul>
      <li
        v-for="(item, index) in pushData"
        :key="index"
      >
        <!-- 如果是输入框 start -->
        <input
          v-if="item.type=='text'"
          type="text"
          :placeholder = "'请输入' + item.name"
          @input="item.fun"
          :class="item.iserr?'error':''" // 问题:数据无法同步到此处
        />
        <!-- 如果是输入框 end -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pushArray: [],
      pushData: { // 表单中涉及的数据
        user: {
          name: '姓名',
          type: 'text'
        },
        phone: {
          name: '手机',
          type: 'text'
        },
        company: {
          name: '公司',
          type: 'text'
        }
      }
    }
  },
  created () { // 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
    let that = this
    for (let item in this.pushData) { // 数据筛选
      let dataType = that.pushData[item]
      dataType.iserr = false
      switch (dataType.type) {
        case 'text':
          // typeText(dataType, dataName)
          dataType.fun = function (e) {
            dataType.val = e.target.value            
            // 问题:通过输入出发iserr改变,并控制input的class显示,但是无法同步到视图
            dataType.iserr = true
            // that.$set(that.pushData[item], 'iserr', true)
          }
          break
      }
    }
  }
}
</script>
用户头像 提问 3 天 @ 我和小伙伴们都惊呆了 中士 (1,296 威望)
分享到:

1个回答

0 投票
 
最佳答案

初始化iserr为false的时候使用 this.$set(this.pushData[item], 'iserr', false)
触发的时候有也要this.$set(this.pushData[item], 'iserr', true)

用户头像 回复 3 天 @ Morgana 中士 (1,062 威望)
选中 5月12日 @我和小伙伴们都惊呆了
提一个问题:

相关问题

0 投票
1 回复 333 阅读
0 投票
0 回复 94 阅读
0 投票
1 回复 246 阅读
0 投票
1 回复 310 阅读
用户头像 提问 2017年 6月13日 @ Pisces 中士 (1,027 威望)
0 投票
1 回复 180 阅读
用户头像 提问 2017年 2月20日 @ Artemis 下士 (632 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...