Vue js - несколько компонентов, каждый из которых имеет начальное выбранное значение - PullRequest
Новая
       3

Vue js - несколько компонентов, каждый из которых имеет начальное выбранное значение

0 голосов
/ 11 января 2020

Я создаю множественный выбор в Vue js, но я не понимаю, как я могу получить несколько экземпляров компонента, каждый из которых имеет другое начальное выбранное значение (v-модель). Каждый компонент получает одинаковое начальное значение из-за выбранных данных в родительском элементе. Должен ли я также использовать реквизит здесь вместо V-модели? или я должен переместить объект данных от родителя к самому компоненту?

Ват я хочу

Первый компонент должен иметь начальный выбор "{id:" 0 ", text: "One"} "и
Компонент два должен иметь начальный выбор" {id: "1", text: "Two"} "

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<div id="app">
  <multi-select v-model="selected" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
  <multi-select v-model="selected" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  Vue.component("multi-select", {

      props: ["options", "value"],

      template: `
        <div>
          <div v-for="option in selectedOption">{{ option.text }}</div>
          <hr>
          <div v-for="option in options">{{ option.text }}</div>
        </div>
      `,

      computed: {
        selectedOption() {
          return this.value;
        }
      }
  });

  new Vue({
    el: "#app",
    data: {
      selected: [{ id: "0", text: "One"}],
    }
  })

</script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 11 января 2020

v-модель означает выбранное значение, обратите внимание, что вы присваиваете оба множественных выбора одной и той же переменной.

возможное решение - создание другой переменной, скажем, selector2 и selector1

и присвоение вашей v-модели соответственно. 

data: {
      selected1: [{ id: "0", text: "One"}],
      selected2: [{ id: "1", text: "Two"}],
    }

и при назначении 

<div id="app">
  <multi-select v-model="selected1" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
  <multi-select v-model="selected2" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
</div>
0 голосов
/ 11 января 2020

Передайте индекс как реквизит, и ваш дочерний компонент может использовать этот индекс для определения значения по умолчанию. 

v-bind:index="0"
v-bind:index="1"
...