Vue js什么都不显示答案

【问题标题】：Vue js displaying nothingVue js什么都不显示
【发布时间】：2018-06-29 05:41:06
【问题描述】：

我正在尝试使用 Vue.js 从数据库中加载网站的数据。一切看起来都不错...... Vue.js 数据在控制台中运行正常，但在页面上什么也没有。我很确定这与我如何访问它无关，因为在控制台中它可以正常工作。你知道可能出了什么问题吗？非常感谢！

console view

html

            <div id="featured">
            {{featured[0].list_featured_text}}
            </div>

javascript

        var topArticle=new Vue({
        el:'#featured',
        data:{featured:null},
        created: function(){
                    $.get("featured.php",function(data){
                      this.featured=JSON.parse(data);
                      console.log(this.featured);
                                                        }
                          );
                        }
        });

php

<?php
$servername="localhost";
$username="root";
$passwort="";
$port=3306;
$databname="futurezone";
$conn= new mysqli($servername,$username,$passwort,$databname,$port);
if($conn->connect_error)
die("Connection failed. ". $conn->conn->error);
$conn->query("SET NAMES utf8");

$sql="SELECT * FROM featured";
$result=mysqli_query($conn,$sql) or die("Connection failed.")

$myarray=array();
while($row=mysqli_fetch_assoc($result))
{
$myarray[]=$row;
}
echo json_encode($myarray);
$conn->close();
?>

【问题讨论】：

标签： javascript php html vue.js

【解决方案1】：

$.get("featured.php", function(data) {
    this.featured = JSON.parse(data);
    console.log(this.featured);
});

回调函数内部的this与函数外部的this不一样。
要保留this - 使用胖箭头函数() => {} 或使用像self 这样的中间变量，例如：

$.get("featured.php", (data) => {
    this.featured = JSON.parse(data);
    console.log(this.featured);
});

或

let self = this;
$.get("featured.php", function(data) {
    self.featured = JSON.parse(data);
    console.log(self.featured);
});

【讨论】：