未定义属性或方法*。渲染时出错

时间:2018-07-13 19:28:44

标签: node.js vue.js axios

我是Vue.js的新手。问题是我无法用JSON的值填充表格。控制台显示:

  

属性或方法“表”未定义

当我单击按钮时,它说:

  

未定义属性或方法“ allRecords”

我不知道为什么。可能是index.js中的问题还是下面的代码中的问题?

谢谢

<template>
      <div >
        <input type='button' @click='allRecords()' value='Select All users'>
        <b-table striped hover responsive id="tabla_final" >
          <tr v-for='table in tables'>
                <td>{{ table.sum_real }}</td>
                <td>{{ table.sum_ppto }}</td>
                <td>{{ table.sum_real }}</td>
              </tr>
        </b-table>
    </div>
    </template>
    <script>
    import Vue from 'vue'
    const axios = require('axios')
    window.onLoad = function () {
      var app = new Vue({
        el: '#tabla_final',
        data: {
          tables: ''
        },
        methods: {
          allRecords: function () {
            axios.get('http://localhost/Tribeca/api.php')
              .then(function (response) {
                app.tablas = response.data
                console.log(response.data)
              })
              .catch(function (error) {
                console.log(error)
              })
          }
        }
      })
    }
    </script>

2 个答案:

答案 0 :(得分:2)

如果您使用的是单文件Vue组件,则意味着vue-loader期望<template>标记的内容是该组件的模板定义,而{{ 1}}标签以导出实例化Vue实例时使用的配置对象。

当前,您的<script>包含有效的模板定义,但您的<template>不导出任何内容。因此,当根据该文件的内容实例化Vue实例时,它不知道在哪里可以找到模板中引用的<script>属性。

您似乎正在尝试将Vue实例安装到模板定义内的元素。但是,您应该改为导出Vue实例配置对象:

tables

请注意,您还需要使<template> <div > <input type='button' @click='allRecords()' value='Select All users'> <b-table striped hover responsive id="tabla_final" > <tr v-for='table in tables'> <td>{{ table.sum_real }}</td> <td>{{ table.sum_ppto }}</td> <td>{{ table.sum_real }}</td> </tr> </b-table> </div> </template> <script> import Vue from 'vue' const axios = require('axios') export default { data() { return { tables: '' } }, methods: { allRecords: function () { let self = this; axios.get('http://localhost/Tribeca/api.php') .then(function (response) { self.tables = response.data console.log(response.data) }) .catch(function (error) { console.log(error) }) } } }) } </script> 一个返回对象的函数,并在data的{​​{1}}回调中正确引用tables数据属性打电话。

答案 1 :(得分:0)

更改:

var conversationReference = message.ToConversationReference();

收件人

var message = JsonConvert.DeserializeObject<ConversationReference>(conversationReference).GetPostToBotMessage(); 
    var client = new ConnectorClient(new Uri(message.ServiceUrl));

    // Create a scope that can be used to work with state from bot framework.
    using (var scope = DialogModule.BeginLifetimeScope(Conversation.Container, message))
    {
        var botData = scope.Resolve<IBotData>();
        await botData.LoadAsync(CancellationToken.None);

        // This is our dialog stack.
        var task = scope.Resolve<IDialogTask>();

        // Create the new dialog and add it to the stack.
        var dialog = new WhateverDialog();
        // interrupt the stack. This means that we're stopping whatever conversation that is currently happening with the user
        // Then adding this stack to run and once it's finished, we will be back to the original conversation
        task.Call(dialog.Void<object, IMessageActivity>(), null);

        await task.PollAsync(CancellationToken.None);

        // Flush the dialog stack back to its state store.
        await botData.FlushAsync(CancellationToken.None);        
    }

每当您要引用数据内部的属性(在这种情况下为表)时,请使用 this.nameOfProperty