Vue js啥都不显示

Posted 2023-02-22

【中文标题】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();
?>

【参考方案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);
);