小编Bou*_*him的帖子

我的vuex商店看起来像这样，但打电话时addCustomer我得到ReferenceError: state is not defined：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: { customers: [] },
  mutations: {
    addCustomer: function (customer) {
      state.customers.push(customer); // error is thrown here
    }
  }
});

这是addCustomer绑定/模板：

<template>
    <button class="button" @click="addCustomer">Add Customer</button>
</template>

这是 的定义addCustomer：

<script>
  export default {
    name: "bootstrap",
    methods: {
      addCustomer: function() {
        const customer = {
          name: 'Some Name',
        };

        this.$store.commit('addCustomer', customer);
      }
    } …

我有需要从一个传递component1到另一个的数据component2。

我不使用vuex或router。

组件树：

-Parent
--Component1
--Component2

从一开始component1我发出ajax请求，检索信息并推送数据。

board: [1,2,3,4,5]

我需要访问检索到的数据 component2

我可以在没有vuex或路由器的情况下做到吗？

谢谢 ：）

我有这个使用 Typescript 编写的VueJS应用程序。我正在使用Axios从我的数据库中获取数据。这很有效，我得到的结果是一个数组，这正是我所期望的。当我console.log在这个数组上做时，我可以看到它是正确的结果。

但是，当我尝试遍历这个数组来为我的选择下拉列表创建选项时，我得到一个空白列表。为什么即使我循环的变量是一个数组，结果也没有出现？

编辑：我在这里添加了一张图片，显示了 Axios 结果 ( response.data)

export default class EditRoute extends Vue {
  result: any;
  selectedRoute: string;
  constructor(){
     super();
     this.selectedRoute = "";
     this.result = [];
 }

  loadData() {
     axios.get('http://localhost:8080/routes')
     .then(response => (this.result = response.data));
  }
}

<select name="routeSelect" v-model="selectedRoute">
   <option v-for="routes in result" v-bind:key="routes.name" v-bind:value="routes.name"> {{ routes.name }} </option>
</select>
<button @click="loadData">Load data</button>

正如您从下面看到的，我正在尝试减小元素的高度v-select，但似乎我可以设置的最小高度有限制。即之后height = 40，进一步降低高度似乎不再起作用了。无论如何，有没有办法围绕这个限制，以便我可以使这个元素更小？我需要这个，因为我需要将它放入一个相对较小的 div 中。提前致谢 -

new Vue({
  el: "#app",
  data: {
    years: [2015, 2016, 2017, 2018]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
<v-app>
  <v-layout row>
      <v-select
        label="height=80"
        outline
        height="80"
        :items="years">
      </v-select>
      <v-select
        label="height=60"
        outline
        height="60"
        :items="years">
      </v-select>
      <v-select
        label="height=40"
        outline
        height="40"
        :items="years">
        </v-select>
      <v-select
        label="height=20"
        outline
        height="20"
        :items="years">
      </v-select>
  </v-layout>
</v-app>
</div>

我ckeditor5在vue.js中进行尝试，遇到一个无法手动设置高度的问题，以下是我的代码，请问是否做错任何事情。

<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

data() {
        return {
            editor: Editor,
            editorData: '',
            editorConfig: {
                height: '500px'
            }
        }

根据我所看到vue-good-table documentationn的，不right-click存在任何事件，只有单击、dbl-click、mouseEnter ..

我需要为每一行打开一个上下文菜单right-click。有人对如何解决问题有任何建议吗？

我v-list在 flex 布局中创建，v-list 在列中水平填充剩余空间。但是如果列表包含很多总高度大于列高的元素，那么列表就会伸出来。我试图将 max-height 和 fix height 添加到 v-list，但随后列表项从 wrapper 伸出v-list。我试图添加 v-scroll 但这没有帮助。

那么如何创建 v-list，scrollable当列表中的项目多于可以出现在 div 中的项目时？

我尝试为maxLength来自 的输入实现 a bootstrap-vue，但是从我从他们的文档中读取的内容来看，他们不支持 max. 如果我删除type="number"，它可以工作，但不再是一个数字。

    <b-form-input
        size="sm"
        v-model="register_volume_first"
        type="number"
        maxlength=4
        placeholder="1902"
    ></b-form-input>

我读到我们不应该在 vuejs 中将 v-if 和 v-for 放在一起。我的 IDE 也出现错误。我该如何在代码中分离 v-if 和 v-for 以便它遵循样式指南？

<div
        v-for="(value, key, index) in items"
        v-if="value.level === undefined || value.level < level"
        :key="key"
      >

level 也是一个计算值

computed: {
    level() {
      return (
         user.access>3
      );
    }
  },

我只见过每个组件有一个 onMounted() 的示例。
我想对每个功能使用 onMounted() 。
有什么问题吗？

我的组件.vue

<script setup>
import { onMounted } from 'vue';

// Feature A
onMounted(() => {
  // Do something.
});

// Feature B
onMounted(() => {
  // Do something.
});
</script>