Назначить локальную переменную во время цикла v-for в Vue JS - PullRequest
Новая
       3

Назначить локальную переменную во время цикла v-for в Vue JS

0 голосов
/ 11 декабря 2018

Я изо всех сил пытаюсь найти решение, которое кажется основной проблемой.

У меня есть шаблон, который использует цикл v-for для создания некоторого контента, внутри этого контента мне нужно запуститьфункция, чтобы проверить, соответствует ли contentID идентификатору из отдельного списка.Если они совпадают, мне нужно взять эти данные и показать их в моем цикле.В настоящее время единственный способ получить эти данные - запустить функцию, которая проверяет несколько раз, то есть 

methods: {
findClientName (clientId) {
  for (let name of this.clientList) {
    if (name.id == clientId) {
      return {
        name
      }
    }
  }
}

<v-card-text>
    {{ findClientName(item.client_id).name.f_name }}
    {{ findClientName(item.client_id).name.l_name }}
</v-card-text>

Это кажется довольно неэффективным способом сделать это, потому что мне нужно вызывать метод в каждой частиданные, которые я хочу, не существует ли способа просто присвоить их локальной переменной внутри шаблона, например .. 

{ clientData = findClientName(item.client_id) }
{{ clientData.f_name }}
{{ clientData.l_name }}

Что я пропускаю или о чем не думаю?

Ответы [ 3 ]

0 голосов
/ 11 декабря 2018

В этом случае рекомендуется использовать свойство computed, и пройти через это свойство с помощью v-for, я предоставил пример для имитации вашего случая: 

new Vue({
  el: '#app',
  data: {
    a: ["aaa", "bbb", "ccc", "ddd", "eee", "fff"],
    b: ["bbb", "sss", "ccc", "eee"]
  },
  computed: {
    isInA() {
      return this.b.filter((item) => {
        return this.a.includes(item)
      })
    }
  }

})
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div v-for="item in isInA">
      {{item}}
    </div>
  </div>

Если ваши массивы содержат объекты, как в вашем случае, вам нужно что-то вроде: 

computed:
 cpt_clients(){
return this.clientList.filter((cl)=>{
                          return this.otherList.findIndex(item=>{return item.id==cl.id;})!==-1;
                        });
         }
       }

и в вашем шаблоне выполните: 

  <v-card-text v-for="cl in cpt_clients" >
       {{cl.name}}
        {{cl.id}}
   </v-card-text>
0 голосов
/ 11 декабря 2018

Я думаю, что вычисление лучше, чем метод, потому что это зависит от вашего localId 

computed: {
   getClientsById (clientId) {
     return this.currentClientList.filter((ccl) => { return this.currentClientList.id === localId });
   }
} 


<v-card-text v-for="item in getClientById">
    {{ item.name }}
</v-card-text>


// Second way without methods and computed

<v-card-text v-for="item in currentClientList" v-if=item.id === localId>
    {{ item.name }}
</v-card-text>
0 голосов
/ 11 декабря 2018

Вам нужно будет выполнить какой-то поиск, если нужные вам данные находятся в другом списке.Можно ли заранее нормализовать список клиентов и использовать это в цикле шаблона?Что-то вроде: 

data () {
  return {
    mapped: [],
    clientList: [...]
  }
},
mounted () {
  this.mapped = this.clientList.map(({ id, f_name, l_name }) => {
    return { [id]: { f_name, l_name } }
  })
}

Тогда ваш шаблон будет: 

<template>
 ...
    <v-card-text v-if="mapped.hasOwnProperty(item.client_id)">
      {{ mapped[item.client_id].f_name }}
      {{ mapped[item.client_id].l_name }}
    </v-card-text>
 ...
</template>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...