【发布时间】：2020-07-18 14:19:09
【问题描述】：
我在使用 vue.js 时遇到了一些问题 我正在学习如何创建组件，并且正在制作一些我想用于 wordpress 主题的组件。我正在使用 REST API 来获取内容并将响应数据从 axios 传递到由 vue 和 vue coponents 管理的 UI。我总是遇到这个错误：
Property or method "navlink" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
这发生在我为导航菜单创建了一个新组件之后，我认为代码是正确的，但我们将不胜感激。我有 home.php 文件，该文件将用作主页的模板，在文件顶部和 header.php 文件中使用 Template Name: 我已经删除了旧菜单并放置了一个 vue 模板。我会为页脚做同样的事情，但是如何修复由小部件或 wordpress 生成的内联脚本引起的错误？如何修复我的错误？
// this is the code of header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container-fluid p-0" id="theme-vue">
<theme-nav v-for="nav in navData" :navlink="nav.post_title"></theme-nav>
<script type="text/x-template" id="theme-nav">
<nav class="navbar navbar-expand-md fixed-top main-nav">
<button class="navbar-toggler hamburger hamburger--spin" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expand="false" aria-label="<?php _e('Toggle Navigation'); ?>">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<a class="navbar-brand ml-auto" href="#">
<img src="" width="auto" height="75">
</a>
<div class="collapse navbar-collapse navbar-content" id="navbar-content">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link top" href="#">{{ navlink }}</a>
</li>
</ul>
</div>
</nav>
</script>
// this is the code of home.php
<?php /* Template Name: Homepage */ ?>
<?php get_header(); ?>
<uptheme-cover v-for="post in postData" :title="post.title.rendered" :src="post._embedded['wp:featuredmedia'][0].source_url"></uptheme-cover>
<script type="text/x-template" id="uptheme-cover">
<div class="row container-cover p-0" style="height:100vh;">
<div class="parallax" :data-parallax-image="src"></div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 p-4">
<h1>{{ title }}</h1>
</div>
</div>
<div class="overlay"></div>
</div>
</script>
<?php //get_footer(); ?>
// this is the footer, it will cause error in vue because of the google map iframe footer widget and wordpress footer scripts
<?php wp_footer(); ?>
<div class="row p-0 footer">
<?php if( is_active_sidebar('footer-map') ): ?>
<?php dynamic_sidebar('footer-map'); ?>
<?php endif; ?>
<div class="col-sm-12 col-md-12 col-lg-12 p-0 text-center credits-col">
<small><?php _e('Powered by '); ?><a class="" href=""><?php _e('UpAdv')?></a></small>
</div>
</div>
</div>
// this code is placed inside the main.js file of my theme
Vue.component('theme-nav',{
template: '#theme-nav',
props: {
//navId: Number
navlink: String,
}
});
Vue.component('theme-cover',{
template: '#theme-cover',
props: {
title: String,
src: String
}
});
const app = new Vue({
el: '#theme-vue',
data: {
postData: [],
navData: []
},
mounted: function(){
this.getMenu();
this.getIndex();
},
created: function(){
this.initParallax();
},
methods: {
initParallax: function(){
const parallax = new universalParallax();
},
getMenu: function(){
// this line didn't work, I need to get the custom logo but I don't know how with REST API?
axios.get('wp-json/theme/v1/logo').then( (response) => {
console.log(response);
});
axios.get('wp-json/theme/v1/menu').then( (response) => {
console.log(response);
response.data.forEach( (item, i) => {
this.navData.push(item);
});
});
},
getIndex: function(){
axios.get('wp-json/wp/v2/pages/?slug=home&_embed').then( (res) => {
console.log(res.data);
res.data.forEach( (item, i) => {
this.postData.push(item);
console.log(item._embedded['wp:featuredmedia'][0].source_url);
});
});
}
}
});
【问题讨论】：
标签： javascript wordpress vue.js