标签: vuejs2

我已经通过npm安装了vue轮播

  "dependencies": {
   "nuxt": "^1.0.0",
    "vue-carousel": "^0.6.9"
  },

现在在我的nuxt配置中

  plugins: [
  '~/plugins/vue-carousel'
 ],

还有vue-carousel.js

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

 Vue.use(VueCarousel);

现在在我的组件中将其用作

<template>
   <div>
        <carousel>
        <slide>
             Slide 1 Content
        </slide>
        <slide>
            Slide 2 Content
         </slide>
       </carousel>
   </div>
  </template>
 <script>

   import Carousel from 'vue-carousel';
   import Slide from 'vue-carousel';
   export default {
      components:{
         Carousel,Slide
      }

    }

我在哪里出错并收到错误

render function or template not defined in component: carousel

我面临着vue.js eventBus非常重要和奇怪的问题.

我的代码是这样的,

mounted: function() {
    eventBus.$on('load-item', () => {
        // some loading data ajax 
    })
}

所以,如果我第一次进入这个组件,它将只执行一次.但是如果我切换到其他组件然后又回到这个组件,事件会发出一次,但是监听器正在执行这个功能2次.因此每次访问此组件时,它都会越来越多地加载数据.第三次3 Ajax请求.第4次4 ajax等.

我试过以下解决方案,

beforeDestroy: function () {
    eventBus.$off('load-item');
}

所以上面的代码将删除监听器,它是否只在它破坏组件时才起作用.但就我而言,如果另一个视图使用相同的组件,则会出现相同的问题.

我的问题是,当我们更改页面时,完全删除事件监听器的最佳方法是什么？

在vue.js有什么东西吗？

如果您不清楚,我可以详细解释.

我想在页面中放下页脚（版权声明）。但是它在页脚下方添加了一些额外的空白。我怎么除去这个额外的空白？

我正在这个VueJS项目中做。这是我的代码。

应用程序

<template>
  <div class="fluid-container">
    <app-header></app-header>
    <div style="min-height:610px;">

      <router-view></router-view>

    </div>

<div>
  <app-footer></app-footer>
</div>

  </div>
</template>

页脚

<template>
  <div class="fluid-container">
    <p class="text-center">Copyright &copy 2018, ABC Marketing. All Rights Reserved.</p>
  </div>
</template>
<script></script>
<style scoped>
div{
  color: white;
  background-color: #003459;

}
</style>

我试图从" validateBeforeSubmit"函数到" saveForm "函数获取数组值.但我在" undefined"中得到" "的值arrlength.请帮我解决.

这是我在vue.js中的代码

export default {
  name: '',
  data() {
    return {}
  },
  ready: function() {
    this.validateBeforeSubmit()
    this.saveForm();
  },
  methods: {
    validateBeforeSubmit() {
      var fieldsVal = new Array();
      var firstName = document.getElementById('firstName').value
      var lastName = document.getElementById('lastName').value
      var designation = document.getElementById('designation').value

      if (firstName != "" && lastName != "" && designation != "") {
        fieldsVal.push(firstName);
        fieldsVal.push(lastName);
        fieldsVal.push(designation);
        return fieldsVal;
      } else {
        fieldsVal.length = 0;
        return fieldsVal;
      }
      return fieldsVal;
    },

    saveForm() { …

我正在使用 VueJS 的VuetifyJs，并且试图以表格格式显示对象数组中的复选框。 所需的输出如下所示：

选中“所有用户”时，应选中所有复选框。

我创建了一个行布局，并将该行分为两个弹性框，因此我具有两列的行结构。我循环使用“ v-for”，并为每一行显示当前索引和下一个索引的值。但是，下一次迭代循环时，将重复最后一个条目。我可以到达的最接近的位置如下所示：

CodePen网址： https ：//codepen.io/dhnsh/pen/ZRMgoE

我也尝试使用表格代替布局和弹性，但无法做到。在codepen中，我使用函数“ checkLength”来获取下一个索引，因为使用预增量运算符来递增“ index”会产生错误（可能是由于数组超出范围）。

1）我们如何在Vuetify中显示所需的输出？

2）是否有像我们在Javascript中那样以“ 2”为增量迭代“ v-for”？例如：

    for(var i=0;i<array.length();i += 2)

v-flex如果元素的网格大小为xs（因此仅在移动设备上），则尝试仅向添加一个类。下面的代码显示了其背后的思考过程。但是，这不起作用，因此如何应用仅适用于特定网格大小的类？

   <v-flex xs12 lg6 :class="{'roomPadding': xs != visible }">
      <p> My room </p>
   </v-flex>

我有一个带有一些值和两个组成部分的商店。红色值更改后需要调用函数时，第一个组件是范围滑块，第二个组件是组件。

在第一个组件中，我更改滑块值并将其添加到vuex存储中。

state: {
    value: 0,
      rgbColors: {
        red: 0
      }
  },

我如何理解我需要使用store.subscribe.watch.rgbColors.red或store.watch.rgbColors.red，它是正确的吗？

而如果正确更改值后如何调用某些函数呢？

我有一个方法可以进行异步调用。

methods: {

        getPercentCovered() {
          this.getPercentageCompletedBySubject(1).then((percent) => {
          return percent;
        });
},

它从ajax请求返回的值计算百分比。

我想的问题是延迟

<progress-bar :percent="getPercentCovered()"></progress-bar>

在呈现道具之前，永远不会传递该值。有没有解决的办法？

我开始学习vue js.

我有一个复选框:

<input type="checkbox" value="users" class="pull-right" v-model="user.permissions">
<input type="checkbox" value="edit user" v-model="user.permissions">
<input type="checkbox" value="add user" v-model="user.permissions">

user.permissions每当我选中复选框时,都会显示数据.

user:{
    permissions: []
},

有没有办法可以默认检查特定的复选框？我试图绑定:checked="isTrue"但没有发生任何事情.

这个应该默认检查

<input type="checkbox" value="users" class="pull-right" v-model="user.permissions">

我正在尝试将我的VueJS应用程序转换为NuxtJS以与SSR一起使用。我被困试图用asyncData加载数据。当我将查询添加到'mounted() {}'函数中时，它可以正常工作asyncData(){}，但无法使用它，因此可以使用SSR。

有谁知道如何解决这个问题。

我的代码：

 <ul>
   <li v-for='province in provinces' v-bind:key="province.id"> {{province.name_nl}}</li>
      </ul>

  asyncData () {
    return { msg: 'Welcome to my  new app' }
    const moment = require("moment");
    var date = moment(new Date()).format("YYYY-MM-DD");
    let housesArray = []
    let provincesArray = []

    return firebase.firestore()
      .collection('provinces')
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
        provincesArray.push(doc.data());
        });
        return {provinces: provincesArray}
      });
  },

还是我应该采取另一种方式？请记住，它确实必须与SSR一起使用。

PS：是的，此代码位于我的页面文件夹中，而不是组件中，我知道这是不允许的。