标签: vue-component

我看到了这个主题,但这是Jquery,我怎样才能将其更改为Vue.js？在Vue.js中是否支持v-on我的错误在哪里.抱歉我的英语很糟糕.

<div id="vue">
    <input v-model="amountModel" v-on:keyup="AddCammas()" value="{{price}}">
</div>

<script>
   el: #vue,
   methods:{
      AddCammas : funtion(){
          if(event.which >= 37 && event.which <= 40) return;

          $(this).val(function(index, value) {
             this.message = this.amountModel
                .replace(/\D/g, "")
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
           });
      } 
   }   
</script>

好吧，我可能有个小问题，但我不知道。

如果我仅使用axios通过一个http请求，则一切正常。

但是当我使用多个请求时，会在控制台日志中得到结果，但无法发送以查看文件（laravel刀片视图文件）。

让我告诉你我的代码：

brand.blade.php

// main element for Vue js el: '#container'
<div id="container" class="row all_brands">
        <brands></brands>
    </div>


// template for brand component
<template id="brand-template">
   <ul>
     // if I only pass one http request through axios then  my data shows here but for multiple request not showing anything.
     <li v-for="brand in list" v-text="brand.brand_id"></li>

   </ul>
   @{{count}}
</template>

brand.js

Vue.component('brands',{

template: '#brand-template',

data: function(){

    return{

        list: [],
        count: ''
    }

},

created: function(){

    //axios.get('api/brands').then(response => this.list = response.data) ; // here …

我正在学习VueJS，使用vue-cli创建了一个新的Vue应用程序，并对其进行了一些更改。这是我在router.js中拥有的：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Panel from '@/components/Panel'
import Search from '@/components/Search'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/panel',
      name: 'Panel',
      component: Panel,
      children: {
        path: 'search',
        component: Search
      }
    }
  ]
})

我的Panel.vue可以正确呈现，而在路由器对象中没有'children'键。这是内容：

<template>
  <div class="panel">
    <h1>Panel</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'panel',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  } …

我有一个Vue子组件,它显示一个bootstrap模式并需要一些字段,其中一个字段是下拉选择.无论出于何种原因,下拉按钮都不会激活,因此下拉项目不会显示:'aria-expand'在单击时保持为false.我的问题是代码清楚地在组件之外工作,所以我真的不明白出了什么问题.这是我正在寻找的工作JSfiddle.

我用于我的Vue组件的代码完全相同,除了

`<template>
    <div> 
        // insert jsfiddle code here
    </div>
</template>
<script>
    export default{}
</script>`

该组件工作正常,按下按钮时模式显示,它只有下拉列表不起作用.如果它以任何方式相关,我使用laravel的单文件vue组件.

我对vue相当陌生，我试图将laravel项目的前端迁移到vue，但是我遇到了问题，我试图遍历一组提供的对象（称为房间），并为每个对象创建div。以及将默认的room_id设置为房间的第一个ID。问题是，当在dom（html）中访问提供的名为“ room”的prop数组时，它可以正常工作，但是在我的组件文件的vue代码中，它似乎始终是未定义或为空这是我的组件vue代码：

export default {
    created() {
        //this.loadMessages(this.room_id)
        console.log(this.first_room)  //undefined;
        console.log(this.rooms) //empty array;
    },
    props: ['rooms','first_room'],
    computes:{
        myrooms: function(){
            return this.first_room;
        }
    },
    data()
    {
        return{
            messages: [],
            newMessage: '',
            room_id: 1 //for test purposes, this works,
        }
    },
    methods: {
        loadMessages(id)
        {
            axios.get('/messages/'+id).then(response => {
                this.messages = response.data;
                console.log(response.data);
            });

        }
    }
}

组件html的重要部分

<div v-for="room in rooms">
    <div class="chat-user room">
        <div v-for="other in room.others">
            <img class="chat-avatar img-circle" :src="other.image" alt="image" >                                        
            <div class="chat-user-name">
                <a :href="'/user/' + other.id">{{ other.name}}</a>
            </div> …

我正在Vue2中创建单个文件组件，并且包括一个子组件：

父组件：

<template>
  <div>
     <my-component-2>
     </my-component-2>
  </div>
</template>

<script>
  ....
</script>

子组件（my-component-2）：

<template>
     <my-component-3>
     </my-component-3>
</template>

<script>
  ....
</script>

孙子组件（my-component-3）：

<template>
     <div v-for="(item, index) in items">
     </div>
</template>

<script>
  ...
</script>

但是my-component-3不是“渲染的”，但是，如果我将<my-component-3>div 包裹起来（就像在调用my-component-2的父组件中一样），那么它将起作用。

有没有一种方法可以调用子组件而不将其包装在任何html标记中？

我有两个不同的vue组件文件,我应该怎么做才能在另一个Component.vue文件中使用Check-list.vue中的changeCollection()方法？

Check-lust.vue:

<template lang="html" ref="">
  <div class="check-list-view">
    <collections :current_collection="this.current_collection" ></collections>
  </div>
</template>

<script>
export default {
  data () {
    return {
      current_collection: 'All'
    }
  },
  methods: {
    changeCollection (collname) {
      this.current_collection = collname
    }
  }
}
</script>

和Component.vue:

<template lang="html">
  <div class="container " style="margin-bottom:32px">
    <!-- NOT WORKS: -->
    <button type="button" name="button" class="btn my-btn-orange" @click="changeCollection('All')">All</button>
  </div>
</template>

<script>

export default {
  props: ['current_collection']
}
</script>

我在main.js中创建了一个全局对象,以便在控制器之间的整个应用程序中访问登录用户的数据

main.js

Vue.prototype.user = getUser() // assume a method to getUser data

现在上面的.user对象将在其他组件中可用this.user,

我正在寻找的是如果我this.user在任何组件中进行更改,这些更改也会反映到其他组件,现在不会发生这种情况

我有两个组件,一个用于更新数据 this.user EditProfileComponent.vue

<input type="text" v-model="user.firstName" />
<input type="text" v-model="user.lastName" />

和其他显示数据 UserCardComponent.vue

<h1>{{user.firstName}} {{user.lastName}}<h1>

在上面提交的表单中,我将数据保存到数据库中并getUser()在刷新时将其恢复

我期待的是,当我在表单中对v-model进行更改时,它应该直接显示更改 UserCardComponent.vue

我将Vue.js应用程序与vue-router结合使用，分为3部分：

App.vue：

<template>
  <div id="app">
    <head>
    </head>
    <NavbarComp/>
    <div>
      <div class="middle">
        <router-view/>
      </div>
    </div>
    <FooterComp/>
  </div>
</template>

该<NavbarComp/>包含登录按钮，我想只出现在着陆页：

<template>
<div>
<nav>
          <router-link to="/" >
          <h3>My Shining app </h3>
          </router-link> 
          <router-link to="/login">
            <button  v-if="section='landing'"> Login</button>              
          </router-link>
</nav>
</div> 
</template>

我试图section在商店中定义一个，然后将该部分定义为每个组件上的计算属性：

  section () {
    this.$store.section = 'login'; 
  }

但无法成功。因此，感谢您的提示。

我正在创建基本的库存管理系统。在此，我要验证的发票中，用户输入的价格必须大于或等于最低销售价格。我使用vuelidate软件包进行验证。

任何线索如何使用vuelidate实现这一目标