所以我昨天一整天都在为这个问题苦苦挣扎。基本上，我有一个带有数据属性dbEnabled的根组件，它应该决定是否显示另一个名为Database的子组件。
这应该通过按下另一个名为Navigation的子组件上的按钮来实现。我设法将此属性从根发送到组件，方法是将其定义为接收组件上的道具并传递给v-show或v-if的Database。不幸的是，它只在创建实例时做出反应（不对变化做出反应）。
到目前为止，我已经设法通过使用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>