首頁  >  問答  >  主體

使用Vue.js處理複選框時,如何使用Enter鍵?

<p>我正在學習Vue.js。在我的應用程式中,我建立了一個帶有多個複選框和搜尋功能的表單。當使用者使用Tab鍵聚焦複選框並按Enter鍵時,應該選取複選框。 </p> <pre class="brush:html;toolbar:false;"><template> <div> <div v-for="(ingredient, index) in filteredIngredients" :key="index" class="list-group-item px-md-4"> <div class="row px-3"> <div class="col-auto"> <input v-model="ingredient.checkbox" class="form-check-input" type="checkbox" @focus="checkFocus" /> </div> <div class="col ps-0"> <span class="mb-2 d-block text-gray-800"> <strong class="text-black-600">{{ ingredient.name }}</strong> </span> </div> </div> </div> </div> </template> <script> export default { methods: { methods: { checkFocus(event) { // 這裡我能做什麼 }, }, }, } </script> </pre>
P粉106301763P粉106301763442 天前489

全部回覆(1)我來回復

  • P粉731977554

    P粉7319775542023-08-27 16:44:30

    如果你想用你自己的方法來做,你可以這樣做。

    export default {
      data() {
        return {
          filteredIngredients: [
            {name: "paper", checkbox: false},
            {name: "salt", checkbox: false}
          ]
        }
      },
      methods: {
        checkFocus(index) {
          this.filteredIngredients[index].checkbox = true;
        },
      }
    }
    <template>
      <div class="list-group-item px-md-4" v-for="(ingredient,index) in filteredIngredients" :key="index">
          <div class="row px-3">
              <div class="col-auto">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    @keyup.enter="checkFocus(index)"
                    v-model="ingredient.checkbox"
                  />
              </div>
              <div class="col ps-0">
                  <span class="mb-2 d-block text-gray-800">
                      <strong class="text-black-600">{{ingredient.name}}</strong>
                  </span>
              </div>
          </div>
      </div>
    </template>

    如果你想使用回車鍵來做,你可以使用@keyup.enter來取代#@focus

    回覆
    0
  • 取消回覆