标签: vue-component

我正在使用 vee-validate 来验证注册表，并且我已经编写了如下代码，

        <form @submit.prevent="signUp()">
          <div class="form-group" :class="{'has-error': errors.has('register.mobile_number') }" >
            <input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" required class="form-control" type="number" placeholder="Mobile Number">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.email') }" >
            <input v-model="register.email" v-validate="register.email" class="form-control" type="email" data-vv-rules="required|email" placeholder="Email">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.password') }" >
            <input v-model="register.password" v-validate="register.password" name="password" data-vv-rules="required" class="form-control" type="password" placeholder="Password">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.confirm_password') }" >
            <input v-model="register.confirm_password" v-validate="register.confirm_password" name="confirm_password" data-vv-as="password" data-vv-rules="required|confirmed:password" class="form-control" type="password" placeholder="Confirm Password">
          </div>
          <div class="modal-footer btn-center">
            <button type="submit" class="btn btn-default">Sign Up</button>
          </div>
        </form>

脚本是：

export default …

Vue 中的 v-model 是一个内置功能，仅适用于少数选定标签吗？props 功能是否可以替代 v-model？

我是JavaScript和 JS 框架的新手。我有以下Vuejs代码片段：

    <div v-for="coefficient in coefficients" class="coefficient">
        <div>
            <span class="name">name:{{coefficient.name}}</span>
            <span class="value">value:{{coefficient.value}}</span>
            <span>---</span>
        </div>
    </div>

这是输出：

name: Ubuntu
value: 1
---
name: MacOS
value: 2
---
name: Windows
value: 3
---

如何排除coefficientsVuejs的最后一项？

我有 4 个组件

我的组件首先是这样的：

<template>
    ...
     <component-second></component-second>
    ...
</template>
<script>
    ...
    export default {
        ...
        updated() {
            // call check method in the component fourth
        }
    }
</script>

我的第二个组件是这样的：

<template>
    ...
     <component-third></component-third>
    ...
</template>
<script>
    ...
    export default {
        ...
    }
</script>

我的第三个组件是这样的：

<template>
    ...
     <component-fourth></component-fourth>
    ...
</template>
<script>
    ...
    export default {
        ...
    }
</script>

我的第四个组件是这样的：

<template>
    ...
</template>
<script>
    ...
    export default {
        ...
        methods: {
            check() {
                ...
            }
        }
    }
</script>

因此，如果首先执行组件中的 update()，我想在第四个组件中调用 check 方法

我该怎么做？

假设我们有以下代码

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  if (error.response.status === 400) {
    if (error.response.data.type === "fieldsValidationErrors") {
      openModal(modal.validationsFailedInfo);
    } else {
      openModal(modal.cannotHandleServerResponse);
    }
  } else if(error.response.status === 403) {
    redirectToLoginScreen();
  } else {
    openModal(modal.errorOccurred);
  }
  return Promise.reject(error);
});

此代码包含在之前

const app1 = new Vue({...});
app1.init();

我还有另一个 UI 应用程序：

const app2 = new Vue({...});
app2.init();

axios 拦截器在声明 vue 实例之前声明。

在每个 vue 应用程序中，我都有一个<notifications type="danger" :messages="errors.items"></notifications>从应用程序接收错误的组件。

在notifications我拥有的组件内部

Vue.component('notifications', {
  ...
  template: '<section v-if="messages.length > 0" id="notifications" …

所以我正在学习 Vue.js，经过一番努力，我（不知何故）得到了以下代码工作。我知道如果它有效，它并不愚蠢，但尽管如此我还是想帮助我改进我的代码，因为我怀疑我是否采取了正确的方法。

以下代码允许用户通过单击按钮添加 Item 组件的多个实例。Item 中 name 字段的输入被传递给一个对象，并被插入到一个数组中，该数组被发送回父组件。

我对这种方法的主要问题是 items 数组在 Item 的所有实例之间作为道具共享，这是不必要的。但是，我无法提出另一个解决方案，因为我只知道如何通过将数据作为 prop 传递并更新来在组件之间共享数据。我还读到 props 应该只由父级更新，所以我猜我也违反了这条规则。

有人可以教我更好的方法吗？

父代码

<template>

    <div class="items">
         <div v-for="n in itemCount">
            <Item :count="n" :items="items"  />
         </div>
    </div>

    <button @click="addItem">Add item</button>

</template>

<script>
    import Item from './../components/Item'; //the child 

    export default {

        components: {
            Item
        },

        data() {
            return {
                itemCount: 1,
                items: [],
            }
        },

        methods: {
            addItem() {
                this.itemCount ++;
            }
        }

    }
</script>

孩子

<template>

    <div class="item">
        <label>Item name</label>
        <input type="text" …

我想创建一个选择框组件，它有一个预定义的标记，可以在我的系统中的任何地方使用。
我在理解v-model属性以及它如何同步来自父组件的预定义值和选择框内部值方面遇到困难。

这是我的例子：http : //jsfiddle.net/eywraw8t/60103/

我希望我的根组件预先选择一个值，Selectbox 组件可以更改该值。我的示例按预期工作，但$emit在选择框中使用事件的方式感觉不对。

const Selectbox = {
    props: {
        value: String
    },

    methods: {
        select($event, value) {
        	// The example works but having
            // $event.target.value here seems very wrong
            this.$emit('input', $event.target.value);
        }
    },
    
    template: `
        <div>
            <select :value="value" @change="select($event, value)">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <div>The value is {{ value }}.</div>
        </div>`
};

new Vue({
  el: "#app",
  components: { Selectbox },
  data: () => ({
  	selectboxValue: …

Vue 组件是否可以在组件内部使用在组件部分定义的 JavaScript 值？

例如：

<script>
export default {
  props: {
    value: Boolean
  }
};
</script>

<style lang="scss" scoped>
@if (value) {
  // Do something
}
</style>

我的问题涉及 Vue，更具体地说是反应性和反应性 getter/setter：https : //vuejs.org/v2/guide/reactivity.html

我可以在 Vue 组件中定义自己的 getter，当 Vue 添加自己的反应式 getter 时，它们会发生什么？

环境

dotnet core 2.1.0

"bootstrap-vue": "^2.0.0-rc.11",
"nuxt": "^1.4.1",
"vue": "^2.5.16",
"vue-axios": "^2.1.1",
"vue-router": "^3.0.1",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.5.16",
"vue-toasted": "^1.1.24",
"vuex": "^3.0.1",
"vuex-router-sync": "^4.0.1"

我不知道如何让一个简单的 bootstrap-vue 模态工作。该modal-sample组件呈现，与按钮可见，但单击按钮时没有任何反应（模式不“秀”）。

但是，在 vue 开发工具中，我可以看到show事件已发出。另外，如果我将代码复制并粘贴到 bootstrap-vue 操场中，它会起作用，所以它必须是我的设置。不确定它是否重要，但它也在 dotnet 核心环境中运行。

配置文件

  const VueLoaderPlugin = require('vue-loader/lib/plugin');

  ...

  resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue',
           ...
        }
        ...
        ,
    module: {
        rules: [
            { test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
            { test: /\.js$/, 
                include: [/ClientApp/, 
                require.resolve("bootstrap-vue")], 
                use: 'babel-loader' },
            { test: …