使用v-for打印数据

Question

我的应用程序中有以下代码片段：

​

export default {
  data() {
    return {
      editmode: false,
      difficulties: {},
      form: new Form({
        id: "",
        name:"",
        difficulty_id: ""
      })
    };
  },
  created(){
        axios
        .get("api/difficulty-level")
        .then(({ data }) => (this.difficulties = data));
  }
 };

<div class="form-group">
  <select class="form-control" v-model="form.difficulty_id">
    <option value disabled hidden>Difficulty</option>
    <option :value="difficulty.id" v-for="difficulty in difficulties" :key="difficulty.id">{{difficulty.name}}</option>
  </select>
  <has-error :form="form" field="difficulty_id"></has-error>
</div>

​

在这里，我尝试用v-for打印select选项中的数据。但上面的代码在select option中给出空白输出：

​

​

该路由已存在，并且工作正常。

在路由中使用相同的axios get方法：

{
    path: "/difficulty-level",
    component: require("./components/product/Difficulty.vue")
},

和以下用于打印数据的代码片段

<tr v-for="difficulty in difficulties" :key="difficulty.id">
  <td>{{difficulty.id}}</td>
  <td>{{difficulty.name}}</td>
  <td>
    <button @click="editModal(difficulty)" class="btn btn-primary btn-sm">Edit</button>

    <button @click="deleteUser(difficulty.id)" class="btn btn-danger btn-sm">Delete</button>
  </td>
</tr>

但这一次我在中使用axios get方法：

{
    path: "/tour/create",
    component: require("./components/product/Create.vue"),
},

有没有人能帮我弄清楚为什么这次我的代码不能工作？

Answer 1

得到解决方案：

        axios
    .get("/api/difficulty-level")
    .then(({ data }) => (this.difficulties = data));

对于嵌套的路由，需要在路由链接之前添加/