Question

大家。对不起，我的愚蠢问题，但我已经尝试了很多。我想要做的是将 getUser() 函数的结果传递给我的 Home.vue 应用程序。但首先，我尝试使用 props 传递简单的变量 'counter'：

main.js

import Vue from 'vue';

import App from './App';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

export default new Vue({
  router,
  store,
  el: '#app',
  props: { 'counter': 1 },
  template: '<app v-bind:counter="counter" />',
  components: { App },
  created () {
    // fetch the data when the view is created and the data is
    // already being observed
    this.getUser()
  },

  methods: {
                getUser() {
                    fetch('/api/auth/user/user/')
                        .then(response => response.json())
                        .then(data => console.log(data));
                }
            },
});

Home.vue

<template lang="pug">
  #app
    .card(v-for="profile in profiles")
      .card-header
        button.btn.btn-clear.float-right(@click="deleteProfile(profile)")
        .card-title {{ profile.user }}
        
      .card-body {{ profile.phone_number }}
      .card-body {{ profile.address }}
      .card-body {{ counter }}

</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'profile-list',
  computed: mapGetters(['profiles']),
  props: ['counter'],
  methods: {
    deleteProfile (profile) {
      // Вызываем действие `deleteNote` из нашего хранилища, которое
      // попытается удалить заметку из нашех базы данных, отправив запрос к API
      this.$store.dispatch('deleteProfile', profile)
    }
  },
  beforeMount () {
    // Перед тем как загрузить страницу, нам нужно получить список всех
    // имеющихся заметок. Для этого мы вызываем действие `getNotes` из
    // нашего хранилища
    this.$store.dispatch('getProfile')
    
  },

}

我想要做的是在 profile.address 下打印“counter”，但这不起作用。谢谢。

Answer 1

我没有看到计数器的任何初始化。只需更改您的代码 props: { 'counter': 1 } 到

data () {return { 'counter': 1 }}

了解详情：https://v3.vuejs.org/api/options-data.html#data

Vue - 如何使用 props 将数据从 main.js 传递到 *.vue

1 个答案: