单击组件的按钮时更改Vue根实例数据值，然后更改另一个组件的v-show / v-if

Question

所以整个昨天我一直在努力解决这个问题。基本上，我有一个具有数据属性 dbEnabled 的根组件，该组件应决定是否显示另一个名为 Database 的子组件。

这应该通过在另一个名为 Navigation 的子组件上按下按钮来实现。通过将其定义为接收组件上的道具，并将其传递到数据库 v-show 或 v-if ，我设法将这个属性从根发送到组件/ strong>。不幸的是，它仅在实例创建时做出反应（不响应更改）。

到目前为止，我已经设法通过使用 document.getElementByID（#db）并添加一个将 display：none！important; 设置为这个元素，但是可以用Vue原生完成吗？

这是main.js文件：

import Vue from 'vue'
import App from './App'
import Title from './Components/Title.vue'
import Navigation from './Components/Navigation.vue'
import AddProduct from './Components/AddProduct.vue'
import Database from './Components/Database.vue'

Vue.config.productionTip = false

Vue.component('app-title', Title)
Vue.component('nav-buttons', Navigation)
Vue.component('add-product', AddProduct)
Vue.component('db', Database)

/* eslint-disable no-new */
window.App = new Vue({
  el: '#app',
  components: { App, Title, Navigation, AddProduct, Database },
  template: '<App/>',
  data: {
    dbEnabled: false // <-- this should decide whether to show/hide #db element
  }
})

这是包含切换按钮的导航组件：

<template>
  <div id="nav-div">
    <button> {{ planBtn }}</button>
    <button> {{ addBtn }}</button>
    <button> {{ editBtn }}</button>
    <button @click="hideDb()"> {{ dbBtn }}</button> //<--here I tried openDb() function    
  </div>
</template>

<script>
  export default {
    name: 'Navigation',
    props: ['dbEnabled'],
    data() {
      return {
        dbBtn: 'Open database',
        addBtn: 'Add product',
        planBtn: 'Plan meal',
        editBtn: 'Edit product'
      }
    },

    methods: {
      openDb() {
        App.dbEnabled = !App.dbEnabled //<--This function changes the root instance's 
                                       //value but the v-show/v-if doesn't react to the 
                                       //change. Nor does changing this value in Chrome
                                       //console make it react
      },

      hideDb() {
        let d = document.getElementById("db")
        d.className = (d.className === '') ? db.className='db-hidden' : db.className=''
        }
      }
    }

</script>

这是数据库组件：

<template>
  <div id="db"> //<--Tried v-show/v-if here, but works only initially
    <table>
      <thead>
        <tr>
          <th
            v-for="prAttr in gridColumns"
          >{{ prAttr }}</th>
        </tr>
      </thead>
      <tbody>
        <tr
          :weight="weight"
          v-for="product in products">
          <td> {{ product.name }}  </td>
          <td> {{ carbs(product, weight) }} </td>
          <td> {{ sugar(product, weight) }} </td>
          <td> {{ fiber(product, weight) }} </td>
          <td> {{ fat(product, weight) }} </td>
          <td> {{ protein(product, weight) }} </td>
          <td> {{ unknwn(product, weight) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'Database',

    data() {
      return {
        weight: 100,
        gridColumns: ['Product name', 'Carbs (%)', 'Sugar (%)', 'Fiber (%)',
        'Fat (%)', 'Protein (%)', 'Unknwn(%)'],
        products: [
          {name: 'Rimi piens pasterizets 2,5%', carbs: 4.8, sugar: 4.8,
        fiber: 0, fat: 2.5, protein: 3.2, unknwn: 'unknwn_ingredients'},
          {name: 'Santini Ksylitol', carbs: 99.8, sugar: 0.2,
        fiber: 0, fat: 0, protein: 0}
        ]
      }
    },

    props: ['dbEnabled'],

    methods: {
      unknwn(cp, weight) {
        let unknwn_ingredients = (100 - cp.carbs
         - cp.fiber - cp.fat - cp.protein) / weight * 100
        return unknwn_ingredients.toFixed(2)
        },

      carbs(cp, weight) {
        let carbs = cp.carbs / weight * 100
        return carbs
      },

      sugar(cp, weight) {
        let sugar = cp.carbs / weight * 100
        return sugar
      },

      fiber(cp, weight) {
        let fiber = cp.carbs / weight * 100
        return fiber
      },

      fat(cp, weight) {
        let fat = cp.carbs / weight * 100
        return fat
      },

      protein(cp, weight) {
        let protein = cp.carbs / weight * 100
        return protein
      }
    }
  }
</script>

Answer 1

您定位到错误的位置。您想定位root component，而不是实际的vue实例（应用）

解决此问题的最简单方法是将App.dbEnabled = !App.dbEnabled更改为this.$root.dbEnabled = !this.$root.dbEnabled

您已安装vue-devtools吗？这可以帮助您了解实际的目标。

我也建议您看看vm.$emit()。 就个人而言，我将使用“发射”将子项更改推向上链。但是，在您的示例中，这可能有点矫kill过正。