Question

我是Vuejs的新手，我的应用程序中出现了意外的输出。我的应用程序的作用是在YouTube API上搜索频道，然后在列表中添加这些频道。

然后我喜欢渲染订阅频道的列表，但总是少收一件。总是在渲染列表中缺少最后插入的项目，而该项目存在于我的数据中。

这是渲染输出：

如果您在文本框下看到右侧列只有一个项呈现，而在我的Vue控制台中，我在channels_info键下有两个项目：

然后，如果我尝试在列表中追加另一个项目，则控制台将显示3个项目，而HTML呈现将显示2，依此类推。

我的代码如下：

var setup = function () {
  app = new Vue(
    {
      el     : '#sml_app',
      data   : {
        channel_name         : '',
        errors               : [],
        channels_found       : {},
        no_channels_found    : true,
        next_page_token      : '',
        prev_page_token      : '',
        page_token           : '',
        subscriptions        : [],
        channels_info        : {},
        subscriptions_counter: 1
      },
      methods: {
        fetch_channel_info     : function ($channel_id) {
          var self = this;
          var base_api_url = 'https://www.googleapis.com/youtube/v3/channels';
          var query_params = {
            'part'      : 'snippet,contentDetails',
            'key'       : 'My-ApiKey',
            'maxResults': 1,
            'id'        : $channel_id
          };
          var get_params = '';

          for (var key in query_params) {

            if (get_params != '') {
              get_params += '&';
            }

            get_params += key + '=' + encodeURIComponent(query_params[key]);
          }

          get_params = '?' + get_params;

          axios.get(base_api_url + get_params).then(
            function (data) {
              data = 'data' in data ? data.data : {};

              if (
                typeof undefined !== typeof data.items &&
                typeof undefined !== typeof data.items[0] &&
                typeof undefined === typeof self.channels_info[$channel_id]
              ) {
                var snippet = data.items[0].snippet;
                var $key = self.subscriptions_counter + '-' + $channel_id;

                self.channels_info[$key] = snippet;
                self.subscriptions_counter += 1;
              }
            }
          ).catch(
            function () {
              self.errors.push(
                'No channel found matching this channel id.');
            }
          );
        },
        // ...
        append_to_subscriptions: function ($channel_id) {
          if (-1 === this.subscriptions.indexOf($channel_id)) {
            this.subscriptions.push($channel_id);

            this.fetch_channel_info($channel_id);

            // Todo-merianos: Create an AJAX request to set the options in
            // database
          }
        }
      }
    }
  );
};

虽然我的HTML方面是这样的：

<div class="subscription" v-for="subscription in channels_info">
    <span v-text="subscription.title"></span>
</div>

你看到有什么不对吗？我不明白为什么我有这个奇怪的输出：/

请问任何消化？

Answer 1

您正在向对象追加新属性。我建议阅读有关对象更改检测警告的this relevant section of the Vue.js documentation。具体来说，您可以使用self.channels_info[$key] = snippet;来确保检测到新的对象密钥并变为被动。

因此，您可以改为Vue.set(this.channels_info, $key, snippet);而不是var allData: Array<Any> = Array()。

绝对阅读更多文档。我确信你会在这个主题的其他信息中找到很多价值。

Vuejs减少了一件物品

1 个答案: