Question

我遇到了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指令时，代码将引发错误。

Answer 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>
  `
});

意外令牌，预期为“，”

1 个答案: