Неожиданный токен, ожидаемый ","

У меня есть SyntaxError:

Unexpected token, expected "," (1:592)

в моем NewPizza.vue файле.

Я пытался добавить , к каждой фигурной скобке, но это не решило ошибку.

Вот мой исходный код:

<template>
    <form>
        <h3>Add new pizza:</h3>

        <div class = "form-group row">
            <label class = "col-sm-3">Name</label>
            <div class = "col-sm-9">
                <input type = "text" class = "form-control" v-model = "newPizza.name">
            </div>
        </div>

        <div class = "form-group row">
            <label class = "col-sm-3">Description</label>
            <div class = "col-sm-9">
                <textarea type = "text" class = "form-control" rows = "5" v-model = "newPizza.description"></textarea>
            </div>
        </div>

        <p><strong>Option 1:</strong></p>
        <div class = "form-group row">
            <label class = "col-sm-3">Size (")</label>
            <div class = "col-sm-9">
                <input type = "text" class = "form-control" v-model = "newPizza.options[0].size">
            </div>
        </div>

        <div class = "form-group row">
            <label class = "col-sm-3">Price</label>
            <div class = "col-sm-9">
                <input type = "text" class = "form-control" v-model = "newPizza.options[0].price">
            </div>
        </div>

        <p><strong>Option 2:</strong></p>
        <div class = "form-group row">
            <label class = "col-sm-3">Size (")</label>
            <div class = "col-sm-9">
                <input type = "text" class = "form-control" v-model = "newPizza.options[1].size">
            </div>
        </div>

        <div class = "form-group row">
            <label class = "col-sm-3">Price</label>
            <div class = "col-sm-9">
                <input type = "text" class = "form-control" v-model = "newPizza.options[1].price">
            </div>
        </div>

        <div class = "form-group row">
            <button type = "button" class = "btn btn-success btn-block">Add</button>
        </div>
    </form>
</template>

<script>
export default {
    data(){
        return {
            newPizza:{
                'name': 'Eg. Margherita',
                'description': 'Eg. A delicious tomato based pizza topped with mozzarella',
                'options': [{
                    'size': 9,
                    'price': 6.95
                }, {
                    'size': 12,
                    'price': 10.95
                }]
            }
        }
    }
}
</script>

Что я должен делать?

На мой взгляд, я думаю, что часть шаблона не имеет никаких проблем. Но когда я добавляю директиву v-model к каждому тегу input, код выдает ошибку.

Неожиданный токен, ожидаемый &quot;,&quot;

Какая строка является строкой 592?

Cat 10.03.2019 07:09

Нет ничего плохого в коде, который вы разместили. Вы использовали копирование и вставку или перепечатали какую-то часть?

Stephen Thomas 11.03.2019 01:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
852
1

Ответы 1

Не уверен, с какой проблемой вы столкнулись - я заставил его работать, используя этот псевдокод (я ничего не менял, просто поместил его в формат строки шаблона и завернул в новый экземпляр Vue).

https://jsfiddle.net/mL7ey3f9/

HTML:

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<div id = "app">
  <app-pizza></app-pizza>
</div>

Экземпляр Vue:

new Vue({
  el: "#app"
})

Компонент (вариант строки шаблона, для простоты):

/** Added globally, which you should prob change **/
Vue.component('app-pizza', {
  data() {
    return {
      newPizza: {
        'name': 'Eg. Margherita',
        'description': 'Eg. A delicious tomato based pizza topped with mozzarella',
        'options': [{
          'size': 9,
          'price': 6.95
        }, {
          'size': 12,
          'price': 10.95
        }]
      }
    }
  },
  template: `
  <form>
    <h3>Add new pizza:</h3>

    <div class = "form-group row">
      <label class = "col-sm-3">Name</label>
      <div class = "col-sm-9">
        <input type = "text" class = "form-control" v-model = "newPizza.name">
      </div>
    </div>

    <div class = "form-group row">
      <label class = "col-sm-3">Description</label>
      <div class = "col-sm-9">
        <textarea type = "text" class = "form-control" rows = "5" v-model = "newPizza.description"></textarea>
      </div>
    </div>

    <p><strong>Option 1:</strong></p>
    <div class = "form-group row">
      <label class = "col-sm-3">Size (")</label>
      <div class = "col-sm-9">
        <input type = "text" class = "form-control" v-model = "newPizza.options[0].size">
      </div>
    </div>

    <div class = "form-group row">
      <label class = "col-sm-3">Price</label>
      <div class = "col-sm-9">
        <input type = "text" class = "form-control" v-model = "newPizza.options[0].price">
      </div>
    </div>

    <p><strong>Option 2:</strong></p>
    <div class = "form-group row">
      <label class = "col-sm-3">Size (")</label>
      <div class = "col-sm-9">
        <input type = "text" class = "form-control" v-model = "newPizza.options[1].size">
      </div>
    </div>

    <div class = "form-group row">
      <label class = "col-sm-3">Price</label>
      <div class = "col-sm-9">
        <input type = "text" class = "form-control" v-model = "newPizza.options[1].price">
      </div>
    </div>

    <div class = "form-group row">
      <button type = "button" class = "btn btn-success btn-block">Add</button>
    </div>
  </form>
  `
});

Другие вопросы по теме