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()方法賦值和強制渲染

 

 

 

如果發現上述方法都不行，可以試試賦值時用{。。。}的方式賦值