>source

확인란 선택에 따라 테이블 행을 표시하려는이 웹 페이지에서 작업 중입니다. 이 질문을 사용하여 작업 예제를 생성 할 수있었습니다. 확인란을 기준으로 표 행 숨기기/표시

내 문제는 형식이 지정된 행 대신 응답으로 배열을 얻고 있다는 것입니다. 내가 여기서 무엇을 놓치고 있는지 잘 모르겠습니다.

여기에서 바이올린을 확인하십시오. https://jsfiddle.net/4roe2kjq/1/

<html>
<style>
    td {
border: thin solid black;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px
    }
</style>
<script src="/javascript/vue.js"></script>
 <div id="app">
      <div v-for="val in cbValues">
        <label>
          <input type='checkbox' :value='val' v-model="selectedType"> 
          {{val}}
        </label>
      </div>
      <table>
      
      
        <template v-for="c in staff_member">
    
              <tr v-if="isVisible(c)">
               <td>{{c.courses}}</td>
            </tr>
  
        </template>
        
        </table>
<script>
   new Vue({
      el: '#app',
      data: {
        selectedType: [],
           staff_member:[{
   
      description :'Non-lab Staff Member',
    courses:[
      {course :'first'},
      {course :'second'}
    ]
  }],
  
  
  
        cbValues: [
        'Non-lab Staff Member'
        ]
      },
      methods: {
        isVisible(row) {
           const matchedValue = this.cbValues.find(v => row.description.indexOf(v) >= 0);
          if (!matchedValue) {
            return true;
          }
          return this.selectedType.includes(matchedValue);
        }
      }
    });
</script>

  • 답변 # 1

    알다시피 스태프 선발에 따라 코스 표를 보여주고 싶네요.

    직원의 코스 배열을 반복하지 않고 직원 만 반복하고 코스 원시 값을 표시하기 때문에 코스 배열을 표시하고 있습니다.

    코드의 빠른 리팩토링은 다음과 같습니다.

    ...
      <table>
        <template v-for="(staff, key2) in staff_member" :key="key2">
          <template v-if="isVisible(staff)">
            <tr v-for="(course, key3) in staff.courses" :key="key3">
              <td>{{course.course}}</td>
            </tr>
          </template>
        </template>
      </table>
    
    

    스태프를 반복하는 것 외에도 스태프의 코스를 반복해야합니다.

    사용해야하는 중요한 것은 key 사용할 때마다 속성 v-for , 문서 살펴보기

  • 이전 html - : after'의사 선택기가 이미지 아래가 아닌 이미지 위에있는 이유는 무엇입니까?
  • 다음 arrays - 30 % 확률로 새 개체를 동적으로 할당 및 초기화