亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在沒有 V-model 的情況下綁定輸入字段值?

如何在沒有 V-model 的情況下綁定輸入字段值?

慕田峪9158850 2022-07-21 10:51:45
在我的 Vue 應用程序中,我有一個計時器和一個文本字段。當我嘗試減少剩余秒數時,我在該字段中所做的更改不斷消失。計時器和字段完全不相關。這是一個簡單的演示,在字段中寫入任何內容:https://codepen.io/basabence/pen/jObwqgL<div id="app">    <span>Time: {{remaining_time}}</span><br>    <input :value="step_answer" type="text"></div>app = new Vue({  el: '#app',  data: {    remaining_seconds: 60,    step_answer: "asdasd",  },  created: function (){    setInterval(()=>{      this.remaining_seconds--    },1000);  }})有趣的是,如果我將其更改:value為 v-model,它可以正常工作 - 但我不想雙向綁定這個字段......你們中有人遇到過這種行為嗎?先感謝您
查看完整描述

2 回答

?
哆啦的時光機

TA貢獻1779條經驗 獲得超6個贊

你得到這個行為是因為data它是一個reactive對象。當你綁定valuewith 時step_answer,你創建了單向綁定data -> component,這意味著step_answer它是主綁定。


要實現Two-way綁定而不v-model需要捕獲@input event并附加它或step_master使用new value.


<input

  v-bind:value="step_answer"

  v-on:input="step_answer = $event.target.value">

完整示例:


<div id="app">

    <span>Time: {{remaining_seconds}}</span><br>

    <input

  v-bind:value="step_answer"

  v-on:input="appendValue($event)">

</div>



app = new Vue({

  el: '#app',

  data: {

    remaining_seconds: 60,

    step_answer: "asdasd",

  },


  created: function (){

    setInterval(()=>{

      this.remaining_seconds--

    },1000);

  },

  methods:{

    appendValue(e){

      this.step_answer=e.target.value;

    }

  }

})


查看完整回答
反對 回復 2022-07-21
?
隔江千里

TA貢獻1906條經驗 獲得超10個贊

:value,一種單向綁定,永遠不會讓來自鍵盤的輸入更新組件的狀態。這就是 v-model 存在的原因。查看此問題和答案以獲取更多詳細信息。



查看完整回答
反對 回復 2022-07-21
  • 2 回答
  • 0 關注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號