小编Fra*_*ank的帖子

我想将 vuetify 的v-stepper与 vue 路由器集成。我的要求如下：

• 每一步都有自己的途径（例如/myform/step1，/myform/step2，/myform/step3等）
• 每个步骤都是动态加载的组件（延迟加载）。
• 每个步骤都是动态创建的（例如，通过循环）。

这更像是一个“什么是最好的方法”这样的问题。我尝试了多种解决方案，但没有一个符合我的要求。

• 我试过创建嵌套路由并router-view在v-stepper-content. 下面举例。我在这里遇到的问题是无法同步更新position（请参阅 v-stepper 元素）和路线。因此，您将始终在更新步骤之前看到路线更新。

<v-stepper v-model="position" vertical>
  <template v-for="(item, index) in steps">

          <v-stepper-step :complete="position > index + 1" :step="index + 1">
            <h2>
              {{item.title}}
            </h2>
          </v-stepper-step>

          <v-stepper-content :step="index+1">
            <router-view></router-view>
          </v-stepper-content>

  </template>
</v-stepper>

• 我尝试的另一个解决方案是直接异步/动态加载组件（因此没有路由器）。然而，我失去了使用浏览器的后退和下一步按钮浏览我的 v-stepper 的漂亮能力。

根据我的经验，最大的陷阱是（与 v-tab 相反），每一步都必须有自己的v-stepper-content. 如果我用选项卡来做这件事，我只会创建一个tab-item并更新视图。我不能这样做v-stepper，因为它不会继续下一步“步骤”。

有人会有创造性的方法吗？

如何截断下面的文本？最小宽度：0；当 flex-direction 设置为 column 时，hack 不起作用。这个答案也没有。

.parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

分派了使状态发生变化的异步操作后，在vuex中调用getter的正确方法是什么？

我创建了一个示例片段来说明我的意思。如您所见，getLastNameByName()失败是因为state.persons为空。奇怪的是，如果我state.persons在那个吸气剂中打印，它将在api调用后打印数组。

预期的行为是getLastNameByName('John')回报{name: 'John', lastname: 'Smith'}

const store = new Vuex.Store({
  state: {
    persons: []
  },

  getters: {
    getLastNameByName: (state) => (name) => {

      // console.log(state.persons) returns the state, yet I cannot call .find on it 
      return state.persons.find(element => {
        return element.name === name
      }).lastname
    },
  },

  mutations: {
    setPersons: (state, payload) => {
      state.persons = [...payload]
    }
  },

  actions: {
    async getPeople({commit}) {
        return new Promise(function(resolve, reject) {
          setTimeout(async () …

我正在使用一个非常基本的CASL实现。不幸的是，文档并没有那么详细。我有以下代码（基本上是从文档中复制粘贴的）。

import { abilitiesPlugin } from '@casl/vue'
import defineAbilitiesFor  from './ability'

const ability = defineAbilitiesFor({name: 'guest'})
Vue.use(abilitiesPlugin, ability )

其中defineAbilitiesFor定义为（在 ./ability.js 中）

import { AbilityBuilder } from '@casl/ability'

function defineAbilitiesFor(user) {
  return AbilityBuilder.define((can, cannot) => {
     can(['read'], 'foo', { username: user.name})
  })
}

我知道可以更新规则/条件（即ability.update([])）。但是初始化CASL后如何更新用户信息呢？（例如在用户登录后

所以我正在学习 Vue.js，经过一番努力，我（不知何故）得到了以下代码工作。我知道如果它有效，它并不愚蠢，但尽管如此我还是想帮助我改进我的代码，因为我怀疑我是否采取了正确的方法。

以下代码允许用户通过单击按钮添加 Item 组件的多个实例。Item 中 name 字段的输入被传递给一个对象，并被插入到一个数组中，该数组被发送回父组件。

我对这种方法的主要问题是 items 数组在 Item 的所有实例之间作为道具共享，这是不必要的。但是，我无法提出另一个解决方案，因为我只知道如何通过将数据作为 prop 传递并更新来在组件之间共享数据。我还读到 props 应该只由父级更新，所以我猜我也违反了这条规则。

有人可以教我更好的方法吗？

父代码

<template>

    <div class="items">
         <div v-for="n in itemCount">
            <Item :count="n" :items="items"  />
         </div>
    </div>

    <button @click="addItem">Add item</button>

</template>

<script>
    import Item from './../components/Item'; //the child 

    export default {

        components: {
            Item
        },

        data() {
            return {
                itemCount: 1,
                items: [],
            }
        },

        methods: {
            addItem() {
                this.itemCount ++;
            }
        }

    }
</script>

孩子

<template>

    <div class="item">
        <label>Item name</label>
        <input type="text" …