>source

클릭 이벤트가 트리거 될 때 두 필드를 모두 바꾸는 데 어려움이 있습니다. 버튼을 클릭 할 때 두 입력 필드를 모두 바꾸고 싶습니다. 다음은 내 코드입니다. 아래 코드는 값과 이름을 한 번만 변경하지만 다시 클릭하면 작동하지 않으며 v-model 값도 변경되지 않습니다. 누구든지 제발 도와 줄 수 있습니까?

HTML

 <button @click="swapInputFields">Swap</button>
  <input type="text" :name="[field1]" v-model="model1" :value="[fromCity]"><br>
  <input type="text" :name="[field2]" v-model="model2" :value="[toCity]">
</div>

vue js 코드

   <script>
       var app = new Vue({
  el: '#app',
  data: {
      fromCity:'FROM',
      toCity :'TO',
      field1 :'name1',
      field2 :'name2'
  },
  methods: {
    swapInputFields()
    {
      this.fromCity = 'TO';
      this.toCity ='FROM';
      this.field1 = 'name2';
      this.field2 ='name1';
    }
  }
});
    </script>

  • 답변 # 1

    제거 [ ] 바인딩에서 대괄호를 제거하고 입력에서 모든 속성을 제거하십시오. typev-model :

    <button @click="swapInputFields">Swap</button>
    <input type="text" v-model="fromCity"><br>
    <input type="text" v-model="toCity">
    
    

    해당 모델 변수 만 필요합니다. fromCitytoCity 데이터에서 :

    data() {
       return {
          fromCity:'FROM',
          toCity :'TO'
       }
    },
    
    

    그리고 다음과 같이 바꿉니다.

    swapInputFields()
    {
       const temp = this.fromCity;
       this.fromCity = this.toCity;
       this.toCity = temp;
    }
    
    

    다음은 데모입니다.

    new Vue({
      el: "#app",
      data(){
         return {
            fromCity:'FROM',
            toCity :'TO'
         }
      },
      methods: {
        swapInputFields()
        {
          const temp = this.fromCity;
          this.fromCity = this.toCity;
          this.toCity = temp;
        }
      }
    });
    
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
      <button @click="swapInputFields">Swap</button>
      <input type="text" v-model="fromCity"><br>
      <input type="text" v-model="toCity">
    </div>
    
    

관련 자료

  • 이전 php - Nginx에서 Laravel을 사용하여 PhpStorm에서 Xdebug 중단을 트리거 할 수 없습니다
  • 다음 mysql - 여러 SQL 테이블과 조인하고 올바른 GROUP_CONCAT 데이터로 기본 테이블 레코드 당 하나의 행을 반환하는 방법은 무엇입니까?