使用:data为什么不显示数据呢

img

img

img

img

img

数据能打印在控制台，但为什么显示不了呢，这也太恶心了，还得凑字数

出现这种情况一般是获取到后端返回的数据对接口直接进行赋值，tableList = res.data.list。

通过这种方法进行赋值并不能被识别到为动态数组，参考普通赋值和对ref数据进行赋值进行理解。

解决：直接通过es6的解构赋值，对数组进行赋值。for循环也可以。

核心：通过数组的 push/pop/shift/unshift 等方法，让数组的长度有明显变化即可。

能贴一下完整代码看一下吗？
接口返回的数据不是json吧?
你看一一下，动态绑定接口数据渲染tableData这个例子：

<template>  
  <div>  
    <el-table :data="tableData">  
      <el-table-column prop="name" label="姓名"></el-table-column>  
      <el-table-column prop="age" label="年龄"></el-table-column>  
    </el-table>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      tableData: []  
    };  
  },  
  mounted() {  
    this.fetchData();  
  },  
  methods: {  
    fetchData() {  
      // 从接口获取数据并赋值给tableData  
      // 假设接口返回的数据格式如下：  
      // [{ name: '张三', age: 20 }, { name: '李四', age: 25 }, { name: '王五', age: 30 }]  
      axios.get('/api/data')  
        .then(response => {  
          this.tableData = response.data;  
        })  
        .catch(error => {  
          console.log(error);  
        });  
    }  
  }  
};  
</script>

结合GPT给出回答如下请题主参考
根据提供的信息，无法确定具体的问题原因。但是，一些常见的原因可能会导致数据无法显示，如下：

  1. 数据类型不匹配：可能是因为你使用的数据类型和你的显示方式不匹配，例如你想显示一个对象，但是你使用了一个字符串的显示方式。

  2. 控制台输出问题：有时候数据已经存在于控制台中，但是由于一些原因（例如控制台输出太多），你可能无法看到它。你可以尝试清空控制台并重新运行你的代码。

  3. 数据输入错误：可能是因为你输入的数据有误，导致无法正常显示。你可以检查一下你的代码是否存在错误，并尝试重新输入正确的数据。

希望以上信息能够帮助你解决问题。如果问题仍然存在，请提供更多信息以便我们更好地帮助你。

你要输出data 绑定的变量值是否有输出

引用 皆我百晓生 小程序回复内容作答：

根据您提供的代码片段，我注意到可能会导致数据不显示的问题：

  1. 数据加载时机：在代码片段3中，您调用 this.fetchData() 来获取数据。但是需要确保页面加载完毕后再进行数据的获取和渲染。您可以将 this.fetchData() 的调用放在 mounted() 钩子函数中，以确保页面已经完全加载后再加载数据。

  2. 异步数据加载：根据代码片段3，您使用了异步操作 api.findNodes().then((response) => {this.sysMenuList = response.data; 来获取数据并将其赋值给 sysMenuList。请确保在数据加载完成后才进行渲染，否则可能会导致数据不显示。您可以在模板中使用 v-if 来判断 sysMenuList 是否有数据，并在数据加载完成后再进行渲染。

综上所述，请确保在页面加载完毕后再获取数据，并在数据加载完成后再进行渲染，以解决数据不显示的问题。如果问题仍然存在，请提供更多的代码和错误信息以便更好地帮助您解决问题。

【相关推荐】




如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

设置个高度，看下是不是遮住了

img