标签: vue-component

我有一个涉及选择元素的组件。下面，opts 是一个对象数组。

Vue.component('atcf-select', {
    props: [
        'opts',
    ],
    data() {
        return {
            element_index: '',
        };
    },
    template: `
        <div>
            <select @change="onChange(opt,index)">
                <option v-for="(opt,index) in opts">
                    {{ opt.text }} {{opt.index}}
                </option>
            </select>
        </div>
    `,
    methods: {
        onChange(opt,index) {
            //Do something with opt and index...
        }
    }
};

问题显然是我无法获取所选的 opt 对象及其索引，并将其用作 onChange 方法的参数。获取所选选项的索引和对象的正确方法是什么？

我将 'type' 属性传递给我的组件以用作 BEM 修改器。

 <div class="badge badge--{{this.$props.type}}">

但是，当我尝试连接该类时，我收到错误。我该如何实现这一目标？

我遇到一个问题，同步组件 JavaScript 在实际显示之前就已加载。

使用a 导入的组件dynamic-import显示v-if为在需要时加载它们。当它们显示时，它们的 JavaScript 也会被加载。但在 v-if 的情况下，slot不会阻止组件加载其生成的 JavaScript 块并将其附加到 DOM。

下拉组件：

<template>
    <li class="dropdown" :class="{ open: visible }">
        <div class="heading" @click.stop="toggle">
            <span>{{ heading }}</span>
        </div>

        <div class="slot-content" v-if="visible">
            <slot></slot>
        </div>
    </li>
</template>

组件与google-map插槽中的异步组件的用法：

<dropdown>
    <google-map>
        <map-marker :data="{{ $marker }}"></map-marker>
    </google-map>
</dropdown>

即使槽有一个v-if，组件 JavaScript 仍在加载。奇怪的是，安装的或创建的都没有被解雇。所以看起来除了组件的异步加载之外，一切都遵守正确的规则。

最好我可以使用带有 a 的插槽，v-if并且不触发加载该async组件生成的块。

显然，如果它是异步加载的话，这并不是一个大问题，但即使是 HTTP2 在请求方面也有其局限性。我宁愿在需要时加载它。

我正在尝试从数据库中获取数据并将其显示为 HTML 内容，但它仅显示为字符串，我在 laravel 中使用 vuejs 组件。这是代码

<div id="main-window" v-for="post in posts">
<div class="post">
  <div class="content">
    {{post.content}}
  </div>
</div>

如何使用 HTML 格式的 post.content ？

我需要制作一个动态表单，其中管理区域允许某人在表单中添加和重新排列字段。每个字段都有一个类型：日期、复选框、选择、文本、数字等。我为每个字段类型创建了单独的组件，但现在我的表单看起来像这样（给出示例的伪代码）。

<section v-for="field in fields">
    <field-date v-if="field.type === 'date'" v-model="field.value"></field-date>
    <field-select v-if="field.type === 'select'" v-model="field.value"></field-select>
    <field-number v-if="field.type === 'number'" v-model="field.value"></field-number>
    <field-text v-if="field.type === 'text'" v-model="field.value"></field-text>
    <field-checkbox v-if="field.type === 'checkbox'" v-model="field.value"></field-checkbox>
</section>

但这已经变得难以控制，而且只会变得更加失控。但我找不到更简单的方法来做到这一点。也许 field 应该是一个带有 render 方法的对象？但这样的话 if/else 就会被抽象到别处。

关于简单情况的问题，我想将 vue模态组件添加到默认的 Laravel 项目中。当我以这种方式注册时：

Vue.component('modal', {
  template: '#modal-template'
})

new Vue({
  el: '#app',
  data: {
    showModal: false
  }
})

并命名组件如下：

ModalComponent.vue

浏览器给我下一个错误。 Github 存储库 中的所有详细信息

顺便说一句，也许最好使用 jQuery 从 bootstrap 添加模态窗口，否则会很混乱？

我在 Vue.js 应用程序中开发登录/注册系统。我希望在拨打电话时更新导航栏中的项目this.$router.push('/')。

应用程序.vue：

<template>
  <div id="app">
    <Navbar></Navbar>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

导航栏组件：

export default {
    name: "Navbar",
    data: function() {
        return {
            isLoggedIn: false,
            currentUser: null
        }
    },
    methods: {
        getAuthInfo: function() {
            this.isLoggedIn = this.auth.isLoggedIn();
            if (this.isLoggedIn) {
                this.currentUser = this.auth.currentUser();
            }
        }
    },
    mounted: function() {
        this.getAuthInfo();
    },
    updated: function() {
        this.getAuthInfo();
    }
}

这是我重定向到另一个页面的方法：

const self = this;
this.axios
    .post('/login', formData)
    .then(function(data) {
        self.auth.saveToken(data.data.token);
        self.$router.push('/');
    })
    .catch(function(error) {
        console.log(error);
        self.errorMessage = 'Error!';
    });

摘要： …

Vue JS 2.6.10

我读过很多关于如何创建自定义指令的帖子，以便您可以检测到弹出菜单外部的单击，以便可以将其关闭。我无法完全让它工作，因为我有一个打开菜单的按钮，单击它会触发“关闭”行为。

这是我的主视图Logbook.vue，其中包含打开菜单的按钮：

// --- Logbook.vue ---
<script>
export default {
  name: 'Logbook',
  components:{
    Years
  },
  methods:{
    clickYears: function(){
      this.$refs.Years.show = true
    }
  }
}
</script>
<template>
  <div id="current-year">
    <a href="#year" ref="yearButton" v-on:click.prevent="clickYears">{{ currentYear }}</a>
    <Years ref="Years" v-on:selectYear="yearSelected" />
  </div>
</template>

Years.vue以下是单击按钮时打开的 菜单组件：

//--- Years.vue ---
<script>
import Vue from 'vue'

//Custom directive to handle clicks outside of this component
Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    window.event = function (event) {
      if (!(el …

目前我正在制作一个电子商务网站。我想将用户的订单数据存储在本地存储上。这是我的代码：

详情.vue

import DataService from '../web_service/services'

export default {
  name: 'details',
  props: ['userId'],
  data () {
    return {
      datas: null,
      url: '/' + this.userId,
      value: 1
    }
  },
  created () {
    DataService.getFindById(this.url)
      .then((res) => {
        this.datas = res.data.data
      })
      .catch((err) => {
        alert('error when fetching API' + err)
      })
  },
  methods: {
    buyNow () {
      let order = {
        product: this.datas.name,
        price: this.datas.price,
        quantity: this.value
      }

      this.$store.commit('addOrder', order)
      this.$router.push('/cart')
    }
  }
}

商店.js

import Vue from 'vue'
import Vuex from …

今天我正在制作一个 todo 网络应用程序，但现在我想Todo在我的Todolist组件中导入一个。我的组件：

应用程序（父）--> Todolist（子）--> Todo（子）

错误：

24:5 错误“Todo”组件已注册但未使用 vue/no-unused-components

代码

待办事项列表

<template>
<!-- TEMPLATE FOR THE TODOS -->

  <div v-for="(todo) in todos" :key="todo.id">
    <Todo
      :todo="todo.text"
      :index="todo.id"
      :checked="todo.checked"
      :deleteTodo="deleteTodo"
    />
  </div>

</template>

<template>
<!-- TEMPLATE FOR THE TODOS -->

  <div v-for="(todo) in todos" :key="todo.id">
    <Todo
      :todo="todo.text"
      :index="todo.id"
      :checked="todo.checked"
      :deleteTodo="deleteTodo"
    />
  </div>

</template>

命令行告诉我导入已导入，但导入尚未使用。

希望大家帮帮我

提前致谢！