标签: vuejs2

版本

VueJs：2.3.3
Vee验证：2.0.0-rc.25

说明

我有一个自定义组件。这是带有字符计数器的输入，我尝试在此输入中放入vee-validate。我想在提交表单时显示错误。我遵循vee-validate文档中的每个步骤，但是没有用。我的表单提交时忽略了任何输入错误。

重现步骤：

使用vee-validate

代码创建一个自定义组件 ：

Parent.vue

   <vue-input maxlength="20" minlength="3" placeholder="works"
    validate="required|numeric" v-model="dataItem.teste" name="teste"></vue-input>

Component.js

Vue.component('vue-input', {
    props: ['maxlength', 'minlength', 'placeholder', 'validate', 'value', 'name'],
    template: `<div>
              <div class="input-group">
                <input type="text" :name="name" :value="value" 
                @input="$emit('input', $event.target.value); 
                counter = $event.target.value.length" 
                :maxlength="maxlength" :placeholder="placeholder" 
                v-validate="validate" 
                :class="{'is-danger': errors.has(name), 'form-control' : true}">

                Erros: {{errors}}
                <span class="input-group-addon">
                    {{ maxlength - counter }}
                </span>

                <span v-show="errors.has(name)" class="text-danger m-t-xs">
                    {{ errors.first(name) }}
                </span>
             </div>
             </div>`,
             data: () => ({
                 counter: 0
             })
});

我正在使用基于vue.js的nuxt.js开发一个网站。该站点是一个简单的站点，其中包含许多页面。我想创建一个知道其内容在哪里的组件，因此需要访问路由器对象。我已经尝试过$nuxt.$route.path但出现错误。如何导入$nuxt或$router对象以在组件中访问它们？

我的模板组件

<template>
  <div>
      <hr>
      <p>{{ $store.state.menuitems[0] }}</p>
      <hr>
      <div class="artfooter">
        <span>i want name of current route here</span>
      </div>
      <br>
  </div>
</template>


<style scoped>
.artfooter{
    font-size: 0.8em;
    display: flex;
    justify-content: space-between;
}
</style>



<script>
  import store from '~/store/index'
  //how to import $nuxt object to access router??
  console.log(store)
  console.log(this.$router.path)
  // the above console.log reports error
  // Cannot read property 'middleware' of undefined

  export default {
  }
</script>

我将逐点解释，因为它可能是一个安静的复合体。

• 我用鼠标或触控板突出显示文本，然后在鼠标向上突出显示的文本存储在对象数组中。每个对象都包含选定的文本。

• 我希望在该数组上循环播放，以便能够一一显示所有选择，只要我选择其他文本即可。

基本上，我将每个选定的文本存储到selectionArray中。每个selectedText是对象内的一个字符串。所以SelectionArray变成了这样的对象数组：在第一个选择上：

[
 {selectedText: '...string...'}
]

在第二个选择中，将更新数组：

[
 {selectedText: '...string...'},
 {selectedText: '...another string...'}
]

依此类推...最后，我在项目数组上使用v-on循环，该数组等于selectionArray，其内容如下：

this.items = selectionArray

目前，我快到了，但是缺少一些东西，因为我看不到实时的修改，因此必须对HTML（奇怪的）进行无用的修改，才能看到结果。我怀疑创建的方法，但至少需要一种逻辑上的调查方法，我需要帮助。谢谢

这是代码：

<template>
  <main class='wrapper'>
    <section class='wrapper-copy'>
      <div class='copy'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis sequi dolorum soluta pariatur asperiores. Recusandae atque nesciunt ipsa velit impedit fugit enim, quia explicabo adipisci sunt earum laudantium illo. Tenetur.
Animi magnam corrupti atque mollitia eaque enim, voluptatum magni laboriosam vel possimus reprehenderit aut doloribus inventore repellat aliquam voluptatem esse ut …

我在Vue 2中有一个组件：

import Vue from 'vue';
import Component from 'vue-class-component';
import Prop from 'vue-property-decorator';

@Component({
  template: require('./template.html'),
})

export class SuklTableApprComponent extends Vue {

  @Prop() 
  type: any;

  @Prop()
  data: any;

  mounted() {}

}

我正在按照文档中的说明进行操作，但是打字稿不会让我使用该@Prop装饰器。它抛出一个错误：

TS2349：无法调用类型缺少调用签名的表达式。类型'typeof“ / home / tomasturan / programming / sukl / reg-dis-forms-v2 / node_modules / vue-property-decorator / li ...'没有兼容的呼叫签名。

这是为什么？我有一个类似的项目，其中似乎所有配置都相同，并且可以正常工作。为什么会引发此错误？

当我加入 computed() ，而不是 mounted() 它抛出一个错误

export default {
  components: {
    MainLayout
  },
  mounted(){
    var x = document.getElementById('homeTabPanes');
    // x.style.background = "blue";
    console.log("check the value of x", x);
  }
}

我需要在应用程序"启动"之前编辑一段我的数据,在阅读此内容后,我可以在创建中执行此操作,但它出现错误:

Cannot read property 'test' of undefined

这是我的代码:

data() {
    return {
        test: 'hello',
    }
},

created:() => {
    console.log(this.test); //should log hello
}

我需要使用不同的信息多次渲染相同的组件,当有人选择它时,它应该在主Vue实例中加载一个函数.

到目前为止,我无法将动态函数作为属性传递,如@change="onchange":

[Vue警告]:事件"更改"的处理程序无效:未定义

在发现

--->在resources\assets\js\components\GeographyField.vue

组件:

<template>
    <fieldset class="form-group col-md">
        <label :for="name" class="control-label" v-html="label"></label>
        <select class="form-control" :name="name" :id="name" :model="_default" :disabled="disabled" @change="onchange">
            <option :value="0" v-html="placeholder"></option>
            <option v-for="object in collection" :value="object.id">{{ object.name }}</option>
        </select>
    </fieldset>
</template>

<script>
    module.exports = {
        props: {
            label: {
                type: String,
                default: 'Options'
            },
            _default: {
                type: Number,
                default: 0
            },
            disabled: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: 'Choose an option'
            },
            name: {
                type: String,
                required: true,
            }, …

我有一个在vue组件之外运行的函数.我希望它返回的数据传递给vue组件中的数据.

    <script>
      function example(){
        var item = 'item';
      };

      example();

      export default {
        data(){
          return (this is where I want item represented)
        }
      }

我有一个代码验证所有表单字段是否填充了数据,但我的表单输入是根据this.id_company条件动态显示的.正如您所看到的那样,如果this.is_company等于TRUE那么验证也应检查用户是否已插入this.taxNumber和this.copmany

isComplete: function () {
    if (this.is_company) {
        return this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber
            && this.city && this.id_country && this.iAggre && this.taxNumber && this.company
    }
    return this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber
        && this.city && this.id_country && this.iAggre;
}

我正在寻找简化我的Javascript代码的最佳方法.你能不能提供一些例子.谢谢

我有一个数组如下:

return {
   items: [
      {active: true, text: 'text1'},
      {active: true, text: 'text2'},
      {active: true, text: 'text3'},
      {active: true, text: 'text4'},
      {active: true, text: 'text5'}
      ...
   ]
}

我想在DOM中使用v-for(easy)迭代它,但我想在两个模板中迭代它们 - 在template1中的数组的前3个元素和template2中的其余元素:

模板1:

<template v-for="item in items">
   first 3 elements:
   {{item}}
</template>

模板2:

<template v-for="item in items">
   the rest of elements: 
   {{item}}
</template>

我应该如何修改我的v-for工作呢？