脚本宝典收集整理的这篇文章主要介绍了

Laravel5.4 在vuejs 中使用axios不能获取属性data的解决方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote> <p>Laravel5.4 <a href="http://www.js-code.com/tag/vuejs" title="vuejs" target="_blank">vuejs</a>和ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>使用钩子mounted不能获取属性data的解决方法</p> </blockquote> <p>Here is my code:<br />数据属性:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" data(){ return { followed : false, } }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> <span class="hljs-keyword">data</span>(){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> { followed : <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>, } },</code></pre> <p>ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>请求数据:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" // mounted 方法为钩子,在Vue实例化后自动调用 mounted() { axios.post('/api/question/follower', { 'question':this.question, 'user':this.user }).then(function(response){ // console.log(response.data); this.followed = response.data.followed; }) }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> <span class="hljs-comment">// mounted 方法为钩子,在<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>实例化后自动调用</span> mounted() { ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>.post(<span class="hljs-string">'/api/question/follower'</span>, { <span class="hljs-string">'question'</span>:<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.question, <span class="hljs-string">'user'</span>:<span class="hljs-keyword">this</span>.user }).then(<a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a>(response){ <span class="hljs-comment">// console.log(response.data);</span> <span class="hljs-keyword">this</span>.followed = response.<span class="hljs-keyword">data</span>.followed; }) },</code></pre> <p>出错问题:<br />在<code>then</code> 这个里边的赋值方法<code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.followed = response.data.followed</code>会出现报错,什么原因呢?在Google上查了下,原来是在 <code>then</code>的内部不能使用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的实例化的<code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a></code>, 因为在内部 <code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a></code> 没有被绑定。<br />可以看下 <a href="http://stackoverflow.com/questions/40996344/axios-cant-set-data" rel="nofollow noreferrer" target="_blank">Stackoverflow</a> 的解释:</p> <blockquote> <p>In <a href="http://www.js-code.com/tag/option" title="option" target="_blank">option</a> <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>s like <code>data</code> and <code>created</code>, vue b<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>ds <code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a></code> to the view-model <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>stance <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a> us, so we can use <code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.followed</code>, but <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a> the <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> inside <code>then</code>, <code><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a></code> is not bound.</p> </blockquote> <p><strong>So</strong> you need to preserve the view-model like (<code>created</code> means the component's data structure is assembled, which is enough here, <code>mounted</code> will delay the operation more):</p> <p>解决方法:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" created() { var self = this; axios.post('/api/question/follower', { 'question':this.question, 'user':this.user }).then(function(response){ // console.log(response.data); self.followed = response.data.followed; }) }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> created() { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> <a href="http://www.js-code.com/tag/self" title="浏览关于“self”的文章" target="_blank" class="tag_link">self</a> = <span class="hljs-keyword">this</span>; axios.post(<span class="hljs-string">'/api/question/follower'</span>, { <span class="hljs-string">'question'</span>:<span class="hljs-keyword">this</span>.question, <span class="hljs-string">'user'</span>:<span class="hljs-keyword">this</span>.user }).then(function(response){ <span class="hljs-comment">// console.log(response.data);</span> self.followed = response.<span class="hljs-keyword">data</span>.followed; }) },</code></pre> <p>或者我们可以使用 <code>ES6</code> 的 <a href="https://babeljs.io/learn-es2015/" rel="nofollow noreferrer" target="_blank">箭头函数</a><code>arrow <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a></code>,箭头方法可以和父方法共享变量 :</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" created() { axios.post('/api/question/follower', { 'question':this.question, 'user':this.user }).then((response) => {<br /> this.followed = response.data.followed;<br /> })<br /> }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> created() { axios.post(<span class="hljs-string">'/api/question/follower'</span>, { <span class="hljs-string">'question'</span>:<span class="hljs-keyword">this</span>.question, <span class="hljs-string">'user'</span>:<span class="hljs-keyword">this</span>.user }).then((response) =&gt; { <span class="hljs-keyword">this</span>.followed = response.<span class="hljs-keyword">data</span>.followed; }) },</code></pre> <p>完整代码:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<script> export default { // 为父组件传递到子组件的属性值,子组件使用props方法接收 props:['question', 'user'], // mounted 方法为钩子,在Vue实例化后自动调用 mounted() { /** 这种旧的写法会在Laravel5.4中报错 this.$http.post('/api/question/follower', {'question':this.question, 'user':this.user}).then(response => { console.log(response.data); }) */ axios.post('/api/question/follower', { 'question':this.question, 'user':this.user }).then(<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(response){ // console.log(response.data); this.followed = response.data.followed; }) }, data(){ <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> { followed : <a href="http://www.js-code.com/tag/false" title="false" target="_blank">false</a>, } }, computed:{ <a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>(){ <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> this.followed ? '已关注' : '关注该问题'; } }, methods:{ // 关注动作 follow(){ axios.post('/api/question/follow', { 'question':this.question, 'user':this.user }).then(function(response){ this.followed = response.data.followed; }) } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>&lt;script&gt; <a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></span> { <span class="hljs-comment">// 为父组件传递到子组件的属性值,子组件使用props方法接收</span> props:[<span class="hljs-string">'question'</span>, <span class="hljs-string">'user'</span>], <span class="hljs-comment">// mounted 方法为钩子,在Vue实例化后自动调用</span> mounted() { <span class="hljs-comment">/** 这种旧的写法会在Laravel5.4中报错 this.$http.post('/api/question/follower', {'question':this.question, 'user':this.user}).then(response =&gt; { console.log(response.data); }) */</span> axios.post(<span class="hljs-string">'/api/question/follower'</span>, { <span class="hljs-string">'question'</span>:<span class="hljs-keyword">this</span>.question, <span class="hljs-string">'user'</span>:<span class="hljs-keyword">this</span>.user }).then(function(response){ <span class="hljs-comment">// console.log(response.data);</span> <span class="hljs-keyword">this</span>.followed = response.<span class="hljs-keyword">data</span>.followed; }) }, <span class="hljs-keyword">data</span>(){ <span class="hljs-keyword">return</span> { followed : <span class="hljs-literal">false</span>, } }, computed:{ <a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>(){ <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.followed ? <span class="hljs-string">'已关注'</span> : <span class="hljs-string">'关注该问题'</span>; } }, methods:{ <span class="hljs-comment">// 关注动作</span> follow(){ axios.post(<span class="hljs-string">'/api/question/follow'</span>, { <span class="hljs-string">'question'</span>:<span class="hljs-keyword">this</span>.question, <span class="hljs-string">'user'</span>:<span class="hljs-keyword">this</span>.user }).then(function(response){ <span class="hljs-keyword">this</span>.followed = response.<span class="hljs-keyword">data</span>.followed; }) } } } &lt;/script&gt;</code></pre> <hr> <p>参看文章:<br /><a href="http://stackoverflow.com/questions/40996344/axios-cant-set-data" rel="nofollow noreferrer" target="_blank">Stackoverflow:Axios can't set data</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Laravel5.4 在vuejs 中使用axios不能获取属性data的解决方法

全部内容,希望文章能够帮你解决

Laravel5.4 在vuejs 中使用axios不能获取属性data的解决方法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过