Проблема VSCode: Vue пример не работает в Firefox / Chrome, но работает в jsfiddle - PullRequest
Новая
       6

Проблема VSCode: Vue пример не работает в Firefox / Chrome, но работает в jsfiddle

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

Когда я запускаю приведенный ниже код в Firefox или Chrome, он дает мне следующий результат: 

{‌{ value }}
{‌{ value }}
{‌{ element }}
{‌{ element }}
{‌{ element }}
{‌{ element }}

Вот фактический код, когда я запускаю его в jsfiddle или переполнении стека, он работает просто отлично: 

new Vue({
  el: '#app',
  data: {
    testData: {
      name: 'TESTOBJECT', 
      id: 10,
      data: [1.67, 1.33, 0.98, 2.21]
    }
  }
});
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="app">
  <ul>
    <li v-for="value in testData">
      <template v-if="Array.isArray(value)">
        <div v-for="element in value">{{ element }}</div>
      </template>
      <template v-else>
        {{ value }}
      </template>
    </li>
  </ul>
</div>

В чем может быть проблема?

Ответы [ 2 ]

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

Это проблема VSCode. Он не показывает все символы, но сохраняет их в любом случае. Итак, он показал мне следующее:

{{ value }}

Но то, что на самом деле было сохранено внутри файла и обработано браузером, было так:

enter image description here

Чтобы предотвратить эту ошибку, вы можете установить следующее расширение VSCode: Выделить неверные символы

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

Обычно это просто импортировать vuejs, принимая ваш код, это работает:

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="value in testData">
                <template v-if="Array.isArray(value)">
                    <div v-for="element in value">{{ element }}</div>
                </template>
                <template v-else>
                    {{ value }}
                </template>
            </li>
        </ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

app. js

new Vue({
  el: "#app",
  data: {
    testData: {
      name: "TESTOBJECT",
      id: 10,
      data: [1.67, 1.33, 0.98, 2.21]
    }
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...