我收到此错误，但在Search Console中我只收到 [Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'title'”
当我检查错误来自何行时，它仅突出显示正在初始化变量的第一行“ var shoppingCartApp = new Vue（{”
有没有一种方法可以调试此程序以显示“ title”所在的行？
还有其他原因导致我收到此错误吗？
<style>
* {
margin: 0;
padding: 0;
}
#shoppingCartApp {
width: 100%;
max-width: 800px;
margin: auto;
}
button:hover {
cursor: pointer;
background: #B7053F !important;
}
</style>
<div id="shoppingCartApp">
<!-- First Page -->
<div id="scPage-1">
<div class="text-center">
<h1>{{ mainTitle }}</h1>
</div>
<!-- Promo Code Section -->
<div class="scPromoCode text-center">
<input type="text" v-model="userPackageContent.promoCodeValue" /><button v-on:click="showPromoValue(userPackageContent.promoCodeValue)">Apply</button>
</div>
<!-- End Promo Code Section -->
<br />
<!-- Country Selection Section -->
<div class="scCountries row text-center">
<button class="usaButton col-sm" v-on:click="showUsaPrice()">USA</button>
<button class="canButton col-sm" v-on:click="showCanPrice()">Canada</button>
<select class="intButton col-sm" id="scCountryDropdown" name="country" v-on:click="showIntPrice()">
<option value="International">International</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
</div>
<!-- End Country Selection Section -->
<br />
<!-- Subscription Selection Section -->
<div class="scJournalSelections row text-center">
<div class="dailySubscription col-sm">
<h2>{{ subscriptionInfo.dailySubcription.title }}</h2>
<h2>${{ subscriptionInfo.dailySubcription.price }}</h2>
<button v-on:click="getCurrentSubscriptionChoice($event)" value="Daily">Subscribe</button>
</div>
<div class="journalSubscription col-sm">
<h2>{{ subscriptionInfo.journalSubcription.title }}</h2>
<h2>${{ subscriptionInfo.journalSubcription.price }}</h2>
<button v-on:click="getCurrentSubscriptionChoice($event)" value="Journal">Subscribe</button>
</div>
<div class="dualSubscription col-sm">
<h2>{{ subscriptionInfo.dualSubcription.title }}</h2>
<h2>${{ subscriptionInfo.dualSubcription.price }}</h2>
<button v-on:click="getCurrentSubscriptionChoice($event)" value="Daily & Journal">Subscribe</button>
</div>
</div>
<!-- End Subscription Selection Section -->
</div>
<!-- End First Page -->
<div id="scPage-2" class="text-center">
<h1>Login/Registration Page If Not Already Logged In</h1>
</div>
<div id="scPage-3" class="text-center">
<h1>Delivery Address</h1>
</div>
<div id="scPage-4" class="text-center">
<h1>Cart Details</h1>
<div class="scPromoCode text-center">
<input type="text" v-model="userPackageContent.promoCodeValue" /><button v-on:click="showPromoValue(userPackageContent.promoCodeValue)">Apply</button>
</div>
<p>Subscription: {{ userPackageContent.subscriptionChoiceTitle }}</p>
<p>Promo Discount: {{ userPackageContent.promoDiscount }}</p>
</div>
<div id="scPage-5" class="text-center">
<h1>Checkout</h1>
<p>Total: ${{ userPackageContent.checkoutTotal }}</p>
<p>Total: ${{ userPackageContent.salesTax }}</p>
</div>
</div>
<script>
var shoppingCartApp = new Vue({
el: '#shoppingCartApp',
data: {
mainTitle: 'Shopping Cart',
//Promo Discount Information
promoValidation: true,
usaProps: {
promoCode: 'usa',
promoDiscount: 50,
subscriptionPrice: 2,
value: false
},
canProps: {
promoCode: 'can',
promoDiscount: 75,
subscriptionPrice: 4,
value: false
},
intProps: {
promoCode: 'int',
promoDiscount: 100,
subscriptionPrice: 6,
value: false
},
dualProps: {
promoCode: 'dual',
promoDiscount: 150,
subscriptionPrice: 8,
value: false
},
//Package Information
subscriptionInfo: {
dailySubscription: {
price: 100,
title: 'Daily'
},
journalSubscription: {
price: 200,
title: 'Journal'
},
dualSubscription: {
price: 300,
title: 'Daily & Journal'
}
},
//User Checkout Information
userPackageContent: {
subscriptionChoiceTitle: null,
subscriptionChoicePrice: null,
promoCodeValue: null,
promoDiscount: 0,
salesTax: 0,
checkoutTotal: null
}
},
methods: {
getCurrentSubscriptionChoice: function (e) {
var subscriptionValue = e.target.value;
if (subscriptionValue == this.subscriptionInfo.dailySubcription.title) {
this.userPackageContent.subscriptionChoiceTitle = this.subscriptionInfo.dailySubcription.title;
this.userPackageContent.subscriptionChoicePrice = this.subscriptionInfo.dailySubcription.price;
this.userPackageContent.checkoutTotal = this.userPackageContent.subscriptionChoicePrice;
}
if (subscriptionValue == this.subscriptionInfo.journalSubcription.title) {
this.userPackageContent.subscriptionChoiceTitle = this.subscriptionInfo.journalSubcription.title;
this.userPackageContent.subscriptionChoicePrice = this.subscriptionInfo.journalSubcription.price;
this.userPackageContent.checkoutTotal = this.userPackageContent.subscriptionChoicePrice;
}
if (subscriptionValue == this.subscriptionInfo.dualSubcription.title) {
this.userPackageContent.subscriptionChoiceTitle = this.subscriptionInfo.dualSubcription.title;
this.userPackageContent.subscriptionChoicePrice = this.subscriptionInfo.dualSubcription.price;
this.userPackageContent.checkoutTotal = this.userPackageContent.subscriptionChoicePrice;
}
console.log(this.userPackageContent.subscriptionChoiceTitle)
console.log(this.userPackageContent.subscriptionChoicePrice)
},
showCurrentCountrySelection: function () {
if (this.usaProps.value == true) {
$('.usaButton').css('background', 'rgba(171, 183, 183, 1)')
} else {
$('.usaButton').css('background', '#fff')
}
if (this.canProps.value == true) {
$('.canButton').css('background', 'rgba(171, 183, 183, 1)')
} else {
$('.canButton').css('background', '#fff')
}
if (this.intProps.value == true) {
$('.intButton').css('background', 'rgba(171, 183, 183, 1)')
} else {
$('.intButton').css('background', '#fff')
}
},
subscriptionChangePriceReset: function () {
this.subscriptionInfo.dailySubscription.price = 100;
this.subscriptionInfo.journalSubscription.price = 200;
this.subscriptionInfo.dualSubscription.price = 300;
this.promoValidation = true;
},
showPromoValue: function (value) {
if (value == "usa") {
if (this.usaProps.value == true && promoValidation) {
this.subscriptionInfo.dailySubscription.price = this.subscriptionInfo.dailySubscription.price - this.usaProps.promoDiscount;
this.subscriptionInfo.journalSubscription.price = this.subscriptionInfo.journalSubscription.price - this.usaProps.promoDiscount;
this.subscriptionInfo.dualSubscription.price = this.subscriptionInfo.dualSubscription.price - this.usaProps.promoDiscount;
this.promoValidation = false;
}
}
if (value == "can") {
if (this.canProps.value == true && promoValidation) {
this.subscriptionInfo.dailySubscription.price = this.subscriptionInfo.dailySubscription.price - this.canProps.promoDiscount;
this.subscriptionInfo.journalSubscription.price = this.subscriptionInfo.journalSubscription.price - this.canProps.promoDiscount;
this.subscriptionInfo.dualSubscription.price = this.subscriptionInfo.dualSubscription.price - this.canProps.promoDiscount;
this.promoValidation = false;
}
}
if (value == "int") {
if (this.int == true && promoValidation) {
this.subscriptionInfo.dailySubscription.price = this.subscriptionInfo.dailySubscription.price - this.intProps.promoDiscount;
this.subscriptionInfo.journalSubscription.price = this.subscriptionInfo.journalSubscription.price - this.intProps.promoDiscount;
this.subscriptionInfo.dualSubscription.price = this.subscriptionInfo.dualSubscription.price - this.intProps.promoDiscount;
this.promoValidation = false;
}
}
},
showUsaPrice: function () {
this.subscriptionChangePriceReset();
//Used to prevent promo code from constantly being applied
this.usaProps.value = true;
this.canProps.value = false;
this.intProps.value = false;
this.showCurrentCountrySelection();
this.subscriptionInfo.dailySubscription.price = this.subscriptionInfo.dailySubscription.price * this.usaProps.price; //API PRICE GOES HERE
this.subscriptionInfo.journalSubscription.price = this.subscriptionInfo.journalSubscription.price * this.usaProps.price; //API PRICE GOES HERE
this.subscriptionInfo.dualSubscription.price = this.subscriptionInfo.dualSubscription.price * this.usaProps.price; //API PRICE GOES HERE
},
showCanPrice: function () {
this.subscriptionChangePriceReset();
//Used to prevent promo code from constantly being applied
this.usaProps.value = false;
this.canProps.value = true;
this.intProps.value = false;
this.showCurrentCountrySelection();
this.subscriptionInfo.dailySubscription.price = this.subscriptionInfo.dailySubscription.price * this.canProps.price; //API PRICE GOES HERE
this.subscriptionInfo.journalSubscription.price = this.subscriptionInfo.journalSubscription.price * this.canProps.price; //API PRICE GOES HERE
this.subscriptionInfo.dualSubscription.price = this.subscriptionInfo.dualSubscription.price * this.canProps.price; //API PRICE GOES HERE
},
showIntPrice: function () {
this.subscriptionChangePriceReset();
//Used to prevent promo code from constantly being applied
this.usaProps.value = false;
this.canProps.value = false;
this.intProps.value = true;
this.showCurrentCountrySelection();
this.subscriptionInfo.dailySubscription.price = this.subscriptionInfo.dailySubscription.price * this.intProps.price; //API PRICE GOES HERE
this.subscriptionInfo.journalSubscription.price = this.subscriptionInfo.journalSubscription.price * this.intProps.price; //API PRICE GOES HERE
this.subscriptionInfo.dualSubscription.price = this.subscriptionInfo.dualSubscription.price * this.intProps.price; //API PRICE GOES HERE
}
}
})
console.log("Script running")
</script>
答案 0 :(得分：1)
您需要先检查数据，然后才能获得较深的title值。
所以尝试这样的事情：
if (subscriptionValue == this.subscriptionInfo &&
this.subscriptionInfo.dailySubcription &&
this.subscriptionInfo.dailySubcription.title)
此外，在您的组件中执行：
{{ subscriptionInfo.dailySubcription && subscriptionInfo.dailySubcription.title }}
只要在您拥有深刻价值的所有地方进行更改，这都应该起作用。