小编Nic*_*ren的帖子

所以我试图在Vue JS中使用以下组件:

Vue.component('careers', {
  template: '<div>A custom component!</div>',

  data: function() {

    var careerData = [];

    client.getEntries()
    .then(function (entries) {
      // log the title for all the entries that have it
      entries.items.forEach(function (entry) {
        if(entry.fields.jobTitle) {
          careerData.push(entry);
        }
      })
    });

    return careerData;
  }
});

以下代码发出如下错误:

[Vue warn]: data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function 
(found in component <careers>)

但是你可以看到我正在通过我的所有Contentful运行foreach entries,然后条目中的每个对象被推送到一个数组,然后我尝试返回数组但是我得到一个错误.

知道如何entries在组件中提取我的所有数据对象吗？

当我在client.getEntries()Vue组件之外使用该函数时,我得到以下数据:

我知道我的这个设置并不理想,但我需要检查输入元素的类.我刚开始在一个新项目中使用Vue.js,但是我们有一个必须使用jQuery的表单验证库.

我正在使用的验证库如果它不符合某些验证要求,则会为输入添加一个类.

如果我使用的是jQuery,我可以使用hasClass来检查输入元素是否具有特定的类.

在Vue中,我不确定如何检查元素是否有类？

以下是我想要实现的示例方法:

      methods: {
        nextStep: function() {
          const element = this.$el.querySelector("#conversation__tram-1 input");
          if (element has the class of is-valid) {
            Do something
          }

        },
      },

正如您所看到的,我想检查输入字段是否具有类is-valid.您能想到我可以用Vue.js做到这一点的任何方式吗？谢谢.

我正在使用 Vue 和 Laravel 开发一个应用程序。Laravel 正在控制我的路线，但我没有使用vue-router.

我根据父组件数据中对象的状态有条件地加载一些组件。

我的父组件中有这个方法：

  activateListingForm: function() {
    this.listingFormActive = !this.listingFormActive;
  }

此方法由将更改为 true 或 false 的按钮触发this.listingFormActive。

然后我将其添加到组件的模板中：

  <transition name="slide-fade">
    <create-listing-form v-if="listingFormActive"></create-listing-form>
    <listings-table v-else></listings-table>
  </transition>

我遇到的一个问题是，一些用户单击浏览器后退按钮，期望加载最后一个组件。我想知道是否有办法根据后退按钮更改状态？

谢谢

我想在条件语句中实现以下内容:

if (changeCount == 5 || changeCount == 10 || changeCount == 15 || changeCount == 20) {
  Do Something
}

如果条件语句的值changeCount是五次表中的任何数字,我想让条件语句通过.

目前我已经使用了它,||但这并不好,因为我需要它是无限的.

我觉得自己像一个菜鸟问这个问题,但任何帮助都会很棒.

谢谢

我正在尝试创建一个聊天样式表单。因此，用户输入了他们的数据，然后在模板中使用类别为的按钮continue-btn。

如您所见，当continue-btn按下时，它使用nextStep将counterdata属性加1 的方法。

然后在我的模板中，v-if="counter >= 1"用于显示聊天对话框和输入字段的下一部分。

然后，我尝试使用scrollTop自动将页面滚动到ID为的新部分#conversation__tram-1。我最初尝试counter在给定值为1 之后运行此代码块：

const container = this.$el.querySelector("#conversation__tram-" + this.counter);
container.scrollTop = container.scrollHeight;

但是，这没有用，因为我猜该#conversation__tram-1元素尚未添加到DOM中。

因此，为了进行测试，我尝试将其包装在超时函数中：

  setTimeout(function(){
    const container = this.$el.querySelector("#conversation__tram-" + this.counter);
    container.scrollTop = container.scrollHeight;
  }, 3000);

但是，尝试此操作时，我会遇到此错误：

Uncaught TypeError: Cannot read property 'querySelector' of undefined

这是我的整个vue文件：

<template>

    <div id="conversation-app">
      <!-- <div v-for="item in items">
        {{ item.text }}
      </div> -->
      <div class="conversation__track">
        <div id="conversation__tram-0">
          <div class="conversation__item agent">
            <img src="/assets/cdn.annuityadvicecentre.dev/images/theme-f/michael-chat-agent.jpg" class="conversation__item-prof-img" …