Я новичок в Vue JS, у меня есть следующий код для отображения соответствующего названия должности при нажатии на флажок в соответствии с идентификаторами.

Например, изначально не отображается название должности, если идентификатор Джона = 1, название должности «доктор» также имеет идентификатор = 1, то при нажатии на Джона должно появиться «доктор». Я пытался сравнить входные данные user.id с массивом job.id, но я не знаю, как это сделать.

Вот мой код:

var filter = new Vue({
  el: "#filter",
  data: {
    users: [
      {
        name: "John",
        id: 1
      },
      {
        name: "Tom",
        id: 2
      }
    ],
    jobs: [
      {
        title: "doctor",
        id: 1
      },
      {
        title: "engineer",
        id: 2
      }
    ]
  },
  methods: {
    filterUser: function (userId) {
      if (this.jobs.id.includes(userId)) {
        // show corresponding job title
      };
    }
  }
})
.sidebar {
  border: 1px solid black;
}
.panel {
  border: 1px solid grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container">
  <div class="row"  id="filter">
    <div class="col-sm-3 sidebar">
      <ul>
        <li v-for="user in users">
          <input type="checkbox" v-on:change="filterUser(user.id)">
          {{ user.name }}
        </li>
      </ul>
    </div>
    <div class="col-sm-9 panel">
      <ul>
        <li v-for="job in jobs">
          {{ job.title }}
        </li>
      </ul>
    </div>
  </div>
</div>
0
thinkvantagedu 29 Окт 2019 в 15:07

2 ответа

Лучший ответ

Вместо изменения исходных «заданий» вы должны использовать другую переменную «filterjobs» для завершения проверенного и непроверенного процесса.

var filter = new Vue({
    el: "#filter",
    data: {
        users: [
        {
            name: "John",
            id: 1
        },
        {
            name: "Tom",
            id: 2
        }
        ],
        jobs: [
        {
            title: "doctor",
            id: 1
        },
        {
            title: "engineer",
            id: 2
        }
        ],
        filterJobs:[]
    },
    
    methods: {
        filterUser: function (userId) {
            var index = this.filterJobs.findIndex(e => e.id === userId)
            if(index >= 0){
                //Remove on Uncheck
                this.filterJobs.splice(index, 1);
            }
            else{
                var jobIndex = this.jobs.findIndex(e => e.id === userId)
                if(jobIndex >= 0){
                    this.filterJobs.push(this.jobs[jobIndex]);
                }
            }
        
        }
    }
    })
.sidebar {
  border: 1px solid black;
}
.panel {
  border: 1px solid grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container">
      <div class="row"  id="filter">
        <div class="col-sm-3 sidebar">
        <ul>
            <li v-for="user in users">
            <input type="checkbox" v-on:change="filterUser(user.id)">
            {{ user.name }}
            </li>
        </ul>
        </div>
        <div class="col-sm-9 panel">
        <ul>
            <li v-for="job in filterJobs">
            {{ job.title }}
            </li>
        </ul>
        </div>
    </div>
</div>
2
thinkvantagedu 29 Окт 2019 в 13:52

Вы можете сделать это с find

filterUser: function (userId) {
  var job = this.jobs.find(e => e.id == userId);
  var jobTitle = job.title;
}
0
kmgt 29 Окт 2019 в 12:20
58607180