使用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选项中打印数据。但是上面的代码在选择选项中给出了空白输出：

该路线存在且有效。

在路由中使用相同的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));

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