Vue : 스타일 목록 행을 선택했을 때

Question

client-row이라는 구성 요소 목록이 있는데 하나를 선택할 때 스타일을 변경하고 싶습니다. 새 행을 선택할 때 이전에 선택한 행에서 스타일을 제거하려고 할 때 문제가 발생합니다.

Vue.component('client-row', { 
    template: '#client-row', 
    props: { 
     client: Object, 
    }, 
    data: function() { 
     return { 
      selected: false 
     } 
    }, 
    methods: { 
     select: function() { 

      // Does not work properly 
      el = document.querySelector('.chosen_row') 
      console.log(el) 

      if (el) { 
       el.className = el.className - "chosen_row" 
      } 
      this.selected = true 
      this.$emit('selected', this.client) 
     } 
    } 
}) 

<script type="text/x-template" id="client-row"> 
    <tr v-bind:class="{ 'chosen_row': selected }"> 
     <td>{{ client.name }}</td> 
     <td>{{ client.location_name || 'no location found' }}</td> 
     <td>{{ client.email || 'no email found' }}</td> 
     <td><button class="btn btn-sm btn-awaken" @click="select()">Select</button></td> 
    </tr> 
</script> 

내가 제대로 selected 재산, 을 설정할 수 있지만 안정적으로 제거 할 수없는 것.

Answer 1

일반적으로 구성 요소의 DOM 요소를 수동으로 수정하는 것은 좋지 않습니다. 대신 부모 구성 요소를 변경하여 선택한 행을 추적하고 해당 값을 행에 전달할 데이터 필드가 있도록하는 것이 좋습니다. 행은 그 값이 부모의 선택된 행과 일치하는지 검사하고 true이면 스타일을 적용합니다.

구성 요소의 DOM 조작은 vue에서 매우 잘못된 것을 나타내는 표시입니다.

귀하의 경우에는 vue와 수동으로 DOM 조작이 서로 대결하고 있습니다. Vue는 자식 데이터 필드 selected이 true인지 여부에 따라 tr에 chosen_row 클래스를 추가할지 여부를 추적합니다. 당신의 코드에서, 당신은 단지 그것을 사실로 설정합니다. Vue는 클릭 한 모든 행에 대해 항상 클래스를 포함하려고 시도합니다. 그런 다음 이전에 클릭 한 모든 행에서 클래스를 수동으로 제거하지만 클릭 한 하위 구성 요소에서 여전히 selected이 참이므로 Vue는 계속 클래스를 추가하려고합니다.

DOM 조작 기반 방식이 아닌 데이터 지향 방식을 사용해야합니다.

아이 :는

Vue.component('client-row', { 
    template: '#client-row', 
    props: { 
     client: Object, 
     selectedClient: Object 
    }, 
    methods: { 
     select: function() { 
      this.$emit('selected', this.client); 
     } 
    } 
}) 

<script type="text/x-template" id="client-row"> 
    <tr v-bind:class="{ 'chosen_row': client === selectedClient }"> 
     <!-- td's removed for brevity --> 
     <td><button class="btn btn-sm btn-awaken" @click="select">Select</button></td> 
    </tr> 
</script> 

부모 :

또한

Vue.component('parent', { 
    template: '#parent', 
    data() { 
     return { 
      clients: [], 
      selectedClient: null 
     }; 
    }, 
    methods: { 
     clientSelected(client) { 
      this.selectedClient = client; 
     } 
    } 
}) 

<script type="text/x-template" id="parent"> 
    <!-- i dont know what your parent looks like, so this is as simple as i can make it --> 
    <div v-for="client in clients"> 
     <client-row :client="client" :selected-client="selectedClient" @selected="clientSelected"></client-row> 
    </div> 
</script> 

는 : 단추에 클릭 이벤트 핸들러가 @click="select"로 단축 할 수

인 권장 바인딩 방식 방법.