vue-改变之后页面不显示

     <block
              v-for="(item, index) in level.indexValue"
              :key="index"
            >
              <template v-if="item.type === 'text' ">
                <text>{{ item.value }}</text>
              </template>
              <template v-else-if="item.type === 'input'">
                <van-field
                  type="digit"
                  :label-width="0"
                  v-model="item.value"
                  :maxlength="10"
                  :disabled="item.modify_flag === '1'"
                  class="inputClass"
                  :clearable="false"
                  @input="val => handleChangeindexValue(val, index)"
                  placeholder=""
                ></van-field>
              </template>
    </block>

　　上述代码中想要对每次输入的值进行一些处理然后传入输入框中显示出来，然而改变对应值后输入框中并不会显示处理过后的数值此时需要使用vue自带的一些方法实现目的。

handleChangeindexValue(value, index) {
      let currentValue = String(value);
      let temp;
      if (currentValue.length === 1) {
        temp = currentValue.replace(/[^ 1-9]/g, "");
      } else {
        temp = currentValue.replace(/\D/g, "");
      }

      this.$set(this.level.indexValue, index, {
        ...this.level.indexValue[index],
        value: String(temp)
      });
      this.$forceUpdate();
    },

　　处理后使用vm.$set( target, propertyName/index, value )和vm.$forceUpdate()方法赋值和强制渲染

 

 

 

如果发现上述方法都不行，可以试试赋值时用{。。。}的方式赋值