v-for l oop не работает с импортированным массивом

Question

У меня есть 2 файла, один из которых называется клиентов. js с данными, а другой - клиентов. vue, и я хотел бы импортировать данные и перечислить их в таблица в файле клиентов. vue; но я не могу получить к нему доступ при импорте.

Все работает нормально, если я перемещаю массив в клиенты. vue -файл (поэтому без импорта).

Мой код выглядит (упрощенно) ) вот так:

Клиенты. vue

<template>
  <div>
    <table>
      <tbody>
        <tr v-for="client in clients">
          <td>{{ client.ClientName }}</td>
          <td>{{ client.ClientId }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import clients from "./data/clients.js";

export default {};
</script>

И мои клиенты. js файл:

export default {
  data () {
    return {
      clients: [
        {
          ClientName: 'testname1',
          ClientId: 1
        },
        {
          ClientName: 'testname2',
          ClientId: 2
        }
      ]
    }
  }
}

Я знаю, что, возможно, как-то "активировал" импортированный массив, но я не знаю, как.

Answer 1

Вам нужно будет предоставить свойство, определенное в вашем component's объекте данных.

Вы импортировали clients, но не внедрили его в data из Clients.vue.

Измените Clients.vue следующим образом.

<script>
import clients from "./data/clients.js";

export default {
  ...clients
};

Это введет clients в Client.vue. Затем вы можете использовать это в своем шаблоне Client.vue.

Альтернатива:

Однако это не очень хорошая модель с точки зрения читабельности.

Было бы лучше иметь свойство в самом компоненте, а затем установить свойство в mounted hook.

Вы можете сделать это следующим образом:

<template>
  <div>
    <table>
      <tbody>
        <!-- use key when iterating -->
        <tr v-for="client in clients" :key="client.ClientId"> 
          <td>{{ client.ClientName }}</td>
          <td>{{ client.ClientId }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import clients from "./data/clients.js";
  export default {
    clients: [] // initial value
  },
  mounted () { // setting clients in mounted 
    this.clients = { ...clients } // use Vue.set if this is a deep nested object
  },
</script>

<style lang="scss" scoped></style>

Mixin way

Если вы собираетесь использовать clients.js в качестве mixin.

Затем измените ваш скрипт на:

<script>
import clients from "./data/clients.js";
export default {
  mixins: [clients],
}
</script>