小编And*_*huk的帖子

I am rendering a list, and have a button that says "Expand". I want that when this button is clicked, it opens a modal with content that is fetched.

I'm trying to render the name inside the data, the same way I'm (correctly) rendering the date property. This can be seen in the following code:

<li v-for="data in tableData" v-bind:key="data">
  <button v-on:click="openModal()">{{data.date}}</button>
  <sweet-modal ref="modal">{{data.name}}</sweet-modal>
</li>

And the function that opens the modal looks like this:

openModal(){
   // let vc = …

通常我在要使用该函数的组件中创建该函数，但是，我开始需要在两个或更多组件中使用某个函数，这意味着现在我必须将其复制并放置在其他组件。这显然不是最佳的，所以我想知道应该将这些函数放在哪里。为了向您展示通用实用函数的含义，我将在此处添加一个：

winrate(wins, losses) {
    let games = wins + losses
    return Math.round(wins * 100 / games) + '%'
}

没什么特别的，只是取胜负，然后返回胜率。

我正在使用 Vuex，实际上我可以将它们放在 Vuex 商店中，但是，我不确定这是否是最好的选择，所以这就是我问你们的原因。

I'm trying to associate bootstrap 4 (bootstrap-vue) with Nuxt.

I have difficulties using mixins and variables in pages or components, although I added style-resources-module.

Here is an extract of nuxt.config.js:

/*
** Global CSS
*/
css: ["~/scss/vars.scss"],

/*
** Plugins to load before mounting the App
*/
plugins: [],
/*

/*
** Nuxt.js modules
*/
modules: [
  // Doc: https://bootstrap-vue.js.org/docs/
  "bootstrap-vue/nuxt",
  // Doc: https://github.com/nuxt-community/style-resources-module
  "@nuxtjs/style-resources"
],

/*
** Disabling Bootstrap Compiled CSS
*/
bootstrapVue: {
  bootstrapCSS: false,
  bootstrapVueCSS: false …

我在 Vue 应用程序中有一个 v-select 小部件（组合框/选择）。当我打开它并将鼠标悬停在选项上时，该选项的背景颜色会突出显示（当前为浅灰色）。当鼠标箭头悬停在选项上时，我希望背景颜色具有不同的颜色。我看不到支持此功能的 v-select 小部件的属性。有办法实现这一点吗？

v-select::hover {
  background-color: "#00857A";
}

<v-select
    append-icon="../assets/img/sy-arrow-chevron-down.svg"
    background-color="white"
    :height="68"
    item-text="label"
    item-value="key"
    class="mr-3"
    v-model="type"
    :width="421"
    :items="searchCriteria"
    @change="performSearch()"
  ></v-select>

我正在尝试创建一个中间件来检查我的用户的角色。

// middleware/is-admin.js
export default function (context) {
  let user = context.store.getters['auth/user']

  if ( user.role !== 'admin' ) {
    return context.redirect('/errors/403')
  }
}

在我的.vue文件中，我把这个放在：

middleware: [ 'is-admin' ]

有用。

现在，我想检查用户是否还有另一个角色。所以，我创建了一个新的中间件：

// middleware/is-consultant.js
export default function (context) {
  let user = context.store.getters['auth/user']

  if ( user.role !== 'consultant' ) {
    return context.redirect('/errors/403')
  }
}

在我的.vue文件中：

middleware: [ 'is-admin', 'is-consultant' ]

不幸的是，当我这样做时，如果我以管理员角色访问该路由，它将不再起作用。

你能告诉我如何创建一个使用 Nuxt.js 检查多个角色的中间件吗？

谢谢！

例：

父组件：

<div> 
  Hello <slot/>!
</div>

子组件：

<div> 
  World 
</div>

应用程序组件：

<Parent> 
  <Child/> 
</Parent>

输出：Hello World！

下面是我从 Strapi 公开的 API 数据。

http://myjson.com/1fgx71

我有一列post_content是 Markdown，我使用 WYSIWYG 编辑器上传了图片。现在上传的图像的路径为

/uploads/f8d87d8b6b1e41fe9ecd965078c57dc1.png

这是我的 Strapi 服务器上的路径，端口为 1337。

现在在我的 Nuxt 应用程序上，我尝试使用 VueShowDown 显示此内容，显然它会因为找不到文件而出错，因为 Nuxt 在端口 3000 上运行，并且 Nuxt 目录中没有文件，文件存储在 Strapi 服务器上。

在这种情况下，我如何显示存储在我前端的 Strapi 上的图像。

谢谢你。

我试图将参数传递到我的路线，但当它到达我的商店时action，它给了我undefined错误！

我尝试更改参数名称，也尝试将其放入$route.params.id方法中并从那里调用它，但仍然没有效果！

如图vue-dev工具所示

早餐.vue

<router-link to="/menu/add/1" tag="h2" class="pull-right">Add Menu</router-link>

菜单添加.vue

methods: {
  ...mapActions(['addMenu']),
  addMenuItem() {
    this.addMenu(this.menu, this.$route.params.typeId);
  }
}

路由器.js

{ path: '/menu/add/:typeId', component: MenuAdd }

状态

state: {
    menu: [],
    breakfastMenu: [],
    lunchMenu: [],
    dinnerMenu: []
  }

行动

addMenu: ({ commit }, { name, price, description }, typeId) => {
  commit('ADD_MENU', { name, price, description }, typeId);
  alert('Menu Successfully Added');
}

突变

'ADD_MENU': (state, { name, price, description }, typeId) => {
   state.menu.forEach((element) …

我的模块有：

export default {
    namespaced: true,
    state: {
        conversations: false
    },
    getters: {
        getConversation(state, ConversationId) {
            console.log('here i am!')
            let conversation = _.find(state.conversations, { id: ConversationId })
            console.log('conversation', conversation)
            return conversation
        },

在我的组件中，我正在尝试：

export default {
  name: "ConversationDetail",
  components: { HeaderSection },
  computed: {
    ...mapGetters("conversation", ["getConversation"]),
    ConversationId() {
      return this.$route.params.ConversationId;
    },
    conversation() {
      return this.getConversation(this.ConversationId);
    }
  },
  methods: {
    ...mapActions("conversation", ["loadConversation"])
  },
  mounted() {
    this.loadConversation(this.ConversationId);

但我收到一个错误：

Error in render: "TypeError: this.getConversation is not a function"

我究竟做错了什么？

我只是想使用 Vue 计算，但我得到了undefined(styleObj.width)，而且似乎没有调用计算函数（没有记录“计算”）。当我更改数据而计算函数仍未被调用并且数据(styleObj.width)仍然是undefined.

代码很简单，我希望你知道我在说什么。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://vuejs.org/js/vue.js"></script>
    <meta charset="utf-8" />
    <title>JS Bin</title>
    <style>
      #app {
        height: 100px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="app" :style="styleObj"></div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          num: 100,
          styleObj: {
            width: this.calcWidth, // always be undefined even num has changed
          },
        },
        computed: {
          calcWidth() {
            console.log('computed') // never log 'computed' which means the
            // calcWidth not be called
            return this.num …