Vuejs v-for работает, но я не могу вызвать локальную переменную - PullRequest
Новая
       10

Vuejs v-for работает, но я не могу вызвать локальную переменную

1 голос
/ 14 февраля 2020

У меня есть простой html, вызываемый на хапи-бэкэнде: 

<form id="databinding" action="/config/update" method="post">
  <div class="container">
    <select v-model="extensions.listType" style="width:300px;font-size:25px;">
      <option value="authorized">Inclusion list</option>
      <option value="forbidden">Exclusion list</option>
    </select>
    <ul>
      <li
        v-for="(ext, index) in extensions[extensions.listType]"
        :key="index"
        onclick="console.log(ext)"
      >
        {{ext}}
      </li>
    </ul>

    <button type="submit">Save parameters</button>
  </div>
</form>
<script>
  var vm = new Vue({
    el: "#databinding",
    data() {
      return {
        maxBytes: 5000000,
        extensions: {
          listType: "forbidden",
          forbidden: ["bat", "bin", "chm", "class", "com", "dll"],
          authorized: ["3g2", "3gp", "arf", "asf"]
        }
      };
    }
  });
</script>

элемент v-for отображает правильное количество точек, но с ним ничего не написано (см. рисунок). Когда я регистрирую переменную ext , я получаю "ext не определен". Я попробовал то же самое с extensions . Кажется, данные vue в порядке v-for , но не после этого.

Есть ли у кого-то представление о том, что происходит, у меня кончается решения. результат оператора v-for

EDIT

Решена проблема, мне просто нужно было добавить веб-пакет для рендеринга шаблона

1 Ответ

0 голосов
/ 17 февраля 2020

Вызовите обработчик @click из vuejs. Теперь вы можете вызывать внешнюю функцию из метода в vuejs. Вот рабочий пример: https://codepen.io/v08i/pen/xxGVQRE

function logThisExternal(item) {
  console.log(item);
}

new Vue({
  el: '#databinding',
    data () {
    return {
       extensions: {
          listType: "forbidden",
          forbidden: ["bat", "bin", "chm", "class", "com", "dll"],
          authorized: ["3g2", "3gp", "arf", "asf"]
        }
    }
  },
  methods: {
    logThis: function(ext) {
      logThisExternal(ext);
    }
  }
})

Код шаблона: 

<form id="databinding" action="/config/update" method="post">
 <ul>
      <li
        v-for="(ext, index) in extensions[extensions.listType]"
        :key="index"
        @click="logThis(ext)"
      >
        {{ext}}
      </li>
    </ul>
</form>

Обратите внимание, что я создал функцию logThisExternal, которая вызывается из vuejs метода logThis

...