Question

我有一个可以正常使用的票证列表（公司票据），当点击时......它会打开该特定票证的详细信息页面（公司票据），并将ID传递给组件。

问题是我无法找到如何在创建的事件中访问此prop参数，因为它无法通过＆＃34;此＆＃34;

访问。

companytickets.vue：

            viewTicket: function(ticket){
            this.$router.push('/companyticket/' + ticket.Id)
            // works : this redirects to http://localhost:8180/companyticket/3
        }

companyticket.vue

export default {
  name: 'CompanyTicket',
  props: {
    id: {
      type: Number,
      required: true
      }
  },
  created() {
    this.$store.dispatch('getCompanyTicket', this.id)
    // ERROR : this.id is undefined...
    console.log("Created here :")
  }
}

路线配置

{ path: '/companyticket/:id', component: CompanyTicket, props: true }

方案

this.id是＆＃34; undefined＆＃34;
使用时。$ route.params.id我得到了正确的id参数，但是以某种奇怪的方式它声称使用＆＃34; companytickets / 2＆＃34; （这是父页面）。正确应该是公司技术/ 2。

Chrome Dev的屏幕截图

Answer 1

使用对象样式或有效负载将params传递给操作。变化：

fetch('https://jsonplaceholder.typicode.com/posts')
   .then( (r)=> r.json() )
   .then( (r) => console.log( r ));

要：

this.$store.dispatch('getCompanyTicket', this.id)

现在您的文件如下所示：

<强> companyticket.vue

this.$store.dispatch("getCompanyTicket", {
    id: this.id 
})

<强> store.js

created() {
    this.$store.dispatch("getCompanyTicket", {
        id: this.id 
    })       
  }

Vuex

由于您正在使用Vuex状态管理模式，这将是在组件之间共享数据的另一种方法。它允许父子沟通，对于子父母也是如此（与道具共享数据只允许父子沟通）。将商店注入您的根组件：

  actions: {
    getCompanyTicket({ commit }, { id })  {         
        console.log("ID is available now-->", id)
    }
  }

这是商店对象中所需的一切：

const app = new Vue({
  el: '#app',
  // provide the store using the "store" option.
  // this will inject the store instance to all child components.
  store,
})

此外，如果您想更新状态：

在Vuex商店中实际更改状态的唯一方法是提交突变

来自州的任何财产都将在每个组成部分中提供：

var store = new Vuex.Store({
    state: {
        ticketID: Number
    },
    mutations: {
        UPDATE_TICKET_ID(state, ticketId) {
            state.ticketId = ticketId;
        }
    },
    actions: {
        getCompanyTicket({ commit, state }, { id })  {         
            commit("UPDATE_TICKET_ID", id)
        }
    }
}

VUE 2.0 - 无法通过$ router.push获取道具ID到详细信息页面

1 个答案:

Vuex