我正在用 vue js 创建购物车。当用户提供正确的信息时，我想在标签中显示用户名。我在 google chrome windows 中收到以下错误。
vue.js:634 [Vue 警告]:属性或方法“users”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是 react 性的，无论是在数据选项中，还是对于基于类的组件。请参阅:https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties . (发现于)
这是我的 html 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js">
</script>
</head>
<body>
<div class="container" id="app">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Show All Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/signin.html">Signin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html"> cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.html" v-on:click="logout">Logout</a>
</li>
</ul>
<div class="nav-item active" v-for="user in users" >
<label>Username:{{username}}</label>
</div>
</nav>
<br />
<select class="form-control" id="sel1" v-on:change="applyfilters($event.target.value)">
<option value="">Select Any value</option>
<option v-for="v in vendors" :value="v.id">{{ v.name }} </option>
<!-- <option value="v.id">{{v.name}}</option>-->
<!--<option value="2">MI</option>-->
</select>
<br />
<div class="row col-12" id="product-list">
<div class="col-4 card mx-2 p-2" v-for="product in products" style="margin-bottom: 20px">
<p>Product id:<b />{{product.id}}</p>
<b>Product Name :</b>{{product.name}}
<div class="row">
<div class="col-4 m-3 p-3">
<b>Price :</b> {{product.price}}
</div>
<div class="col-4 m-3 p-3">
<b>Vendor :</b> {{product.vendor.name}}
</div>
<div class="col-6 m-2 p-3">
<button class="col btn btn-primary" v-on:click="addToCart(product.id)">Buy</button>
</div>
</div>
</div>
<br />
</div>
</div>
</body>
</html>
<script>
let app = new Vue({
el: "#app",
data: {
newTask: '',
id: 0,
url: '/todos',
status: false,
products: [],
vendors: []
},
methods: {
getAllProducts() {
new Promise((resolve) => {
axios.get('/api/products').then(function (response) {
resolve(response.data)
})
}).then((data) => {
this.products = data
// console.log(this.products)
})
},
getusers() {
new Promise((resolve) => {
axios.get('/api/users').then(function (response) {
resolve(response.data)
})
}).then((data) => {
this.users = data
})
},
addToCart(id) {
console.log(id)
var obj = { productId: id };
console.log(obj)
new Promise((resolve) => {
axios.post('/api/cart/', obj).then(function (response) {
resolve(response.data)
})
}).then((data) => {
console.log(data)
console.log(data.id)
if (!data.id) {
// console.log("fist login")
// window.alert("Fist login ")
// window.location = "signin.html";
}
else {
// console.log("successfully add to cart")
window.alert("product has been added to your cart")
}
})
},
findAllVendors() {
new Promise((resolve) => {
axios.get('/api/vendor').then(function (data) {
resolve(data.data)
// console.log(data.data)
})
}).then((data) => {
this.vendors = data
})
},
applyfilters(id) {
new Promise((resolve) => {
axios.get('/api/products/' + id).then(function (response) {
resolve(response.data)
})
}).then((data) => {
this.products = data
// console.log(this.products)
})
}
}
})
app.getAllProducts();
app.findAllVendors();</script>
她的是屏幕截图输出。
最佳答案
data: {
users: [],
newTask: '',
id: 0,
url: '/todos',
status: false,
products: [],
vendors: []
},
您的数据必须如下所示。这是因为您在模板中调用 this.users 或 users 但它未在实例上定义。您需要在数据中定义属性以使其也具有反应性。
关于javascript - 属性或方法 "users"未定义 vue js 应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57212025/