Saya baru mengenal Vue JS, saya memiliki kode berikut untuk menunjukkan judul pekerjaan yang sesuai saat mengklik kotak centang sesuai dengan ID.

Misalnya, awalnya tidak ada judul pekerjaan yang ditampilkan, jika id John = 1, judul pekerjaan "dokter" juga memiliki id = 1, maka mengklik John harus menunjukkan "dokter". Saya mencoba membandingkan input user.id dengan array job.id, tetapi saya tidak tahu bagaimana melakukannya.

Ini kode saya:

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 Oktober 2019, 15:07

2 jawaban

Jawaban Terbaik

Alih-alih mengubah 'pekerjaan' asli, Anda harus mengambil variabel lain 'filterjobs' untuk menyelesaikan proses yang dicentang dan tidak dicentang.

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 Oktober 2019, 13:52

Anda dapat melakukannya dengan find

filterUser: function (userId) {
  var job = this.jobs.find(e => e.id == userId);
  var jobTitle = job.title;
}
0
kmgt 29 Oktober 2019, 12:20