标签: vuejs2

所以我有一个带有四个标签的Tabs.vue组件:

<template>
.
.
      <v-tab href="#tab-1" @click="showFirstTabFunc">
        First Tab
        <v-icon>check_box_outline_blank</v-icon>
      </v-tab>

      <v-tab href="#tab-2" @click="showSecondTabFunc">
        Second Tab
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>

      <v-tab href="#tab-3" @click="showThirdTabFunc">
        Third Tab
        <v-icon>memory</v-icon>
      </v-tab>

      <v-tab href="#tab-4" @click="showTabFourFunc">
        Fourth Tab
        <v-icon>list_alt</v-icon>
      </v-tab>
.
.   
</template>

<script>
.
.
  methods:{
   showFirstTabFunc(){
   },
   showSecondTabFunc(){
   },
   showThirdTabFunc(){
   },
   showFourthTabFunc(){
   },
.
.
</script>

现在我有父组件App.vue,其中包含:

<template>
.
.
   <app-tabs></app-tabs>
.
.
</template>

<script>
    import Tabs from "./Tabs.vue";
    export default {
      data() {
        return {
         showFirstTab: false,
         showSecondTab: false,
         showThirdTab: false, …

我正在尝试使localStorage对象具有反应性,因此如果它更新,它也将使用同一个对象在其他选项卡中更新.我正在使用Vue.js并尝试创建一个返回localStorage对象的计算属性,但这不起作用.如何使对象具有反应性并使其在其他浏览器选项卡中更新？

computed: {
  localStorageObject() {
    return JSON.parse(localStorage.getItem('object'));
  }
}

如何lighten( );在VueJS中使用SASS颜色功能？下面的确切代码:

<style lang="scss">
@import "../assets/variables";

.disable-primary {
  lighten( $primary, 10% );
}
</style>

但我在VS代码中遇到编译错误:

Failed to compile.
./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue- 
loader/lib/style-compiler?{"vue":true,"id":"data-v- 
8dc7cce2","scoped":false,"hasInlineConfig":false}!./node_modules/sass- 
loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue- 
loader/lib/selector.js?type=styles&index=1!./src/components/Home.vue
Module build failed: 
lighten( $color-primary, 10% );
^
  Property "lighten" must be followed by a ':'

如何在vue.js应用程序中使用jQuery脚本？

var app = new Vue({ 
    el: '#app',
    data: {
        users: [{'my_date': ''}]
    }
});

<div id="app">
    <input class="form-control pickadate" v-model="user.my_date" placeholder="My Date">
</div>

我像这样运行jQuery脚本但是当我.pickadate向我的输入添加类时它没有反应并且没有出现datepicker:

$('.pickadate').pickadate({
    max: Date.now(),
    format: "yyyy-mm-dd"
});

我将在Nuxtjs应用程序中通过Vue.set（）设置属性。

editPost(post) {
    Vue.$set(post, 'edit', true)
}

得到错误：未定义Vue

以前，我已经在其他项目中使用的Vanilla JS中做了一些拖放功能。现在，我开始了一个Vue.js项目，我想使用相同的拖放功能。

是否可以在Vue.js组件中包含普通JS文件？怎么做呢？

到目前为止，我只尝试<script>在index.html的head元素中添加标签，但会引发错误。

<script src="../src/js/drag-and-drop.js"></script>

我试图在Vue JS中创建一个启动屏幕（加载屏幕），几秒钟后消失，显示我的默认视图。我尝试了几种方法，但都无法使用。最接近此示例的是CodePen上的示例，但理想情况下，该组件不在main.js中，而是位于其自己的组件中。尽管如此，以下代码仍无法正常工作。

我的main.js如下所示：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

// FILTERS
Vue.filter('snippet', function(value) {
    return value.slice(0,100);
});

Vue.component('loading-screen', {
  template: '<div id="loading">Loading...</div>'
})

new Vue({
  router,
  store,
  render: h => h(App),
  data: {
    isLoading: true
  },
  mounted () {
    setTimeout(() => {
      this.isLoading = false
    }, 3000)
  }
}).$mount("#app");

我的App.vue如下

<template>
  <div id="app">

    <loading-screen v-if="isLoading"></loading-screen>

    <Top/>
    <router-view/>
    <PrimaryAppNav/>

  </div>
</template>


<script>

import Top from './components/Top.vue' …

我试图用来v-for遍历包括标题和图标的数据。现在我只能通过循环获得一个图标，我的问题是，如何在循环过程中获得一个以上的图标？

我已经制作了一个Codepen：https ://codepen.io/anon/pen/MMaGOZ ?& editable = true & editors = 101 。因此，基本上在此示例中，如何获得多个图标。因此，如果我还希望仪表板旁边有一个搜索图标。

  <div id="app">
 <v-app id="inspire">
   <v-navigation-drawer
    class="blue lighten-3"
    dark
    permanent
   >
     <v-list>
       <v-list-tile
        v-for="item in items"
        :key="item.title"
        @click=""
       >
      <v-list-tile-action>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-tile-action>

      <v-list-tile-content>
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile-content>
    </v-list-tile>
  </v-list>
</v-navigation-drawer>

 new Vue({
  el: '#app',
  data () {
   return {
    items: [
      { title: 'Dashboard', icon: 'dashboard','search' },
      { title: 'Account', icon: 'account_box' },
     { title: 'Admin', icon: 'gavel' }
    ]
   }
 }
 })

如果我这样做 …

我正在使用Vue JS，并尝试使用三元表达式有条件地更改某些值，我正在努力将以下内容转换为三元表达式，这是我的默认方法：isLoading是true

fetchData(showLoading) {
  if (showLoading) {
    this.isLoading = true
  } else {
    this.isLoading = false
  }
}

我正在尝试使用Vuu.js将值从父组件传递到子组件。我提供了一个很好的例子。但是当我更改名称时，它将停止工作。我不知道我在做什么错。我对道具的了解有限，但我仍在努力使自己步入正轨。

工作示例：

https://codepen.io/sdras/pen/788a6a21e95589098af070c321214b78

的HTML

<div id="app">
  <child :text="message"></child>
</div>

JS

Vue.component('child', {
  props: ['text'],
  template: `<div>{{ text }}</div>`
});

new Vue({
  el: "#app",
  data() {
    return {
      message: 'hello mr. magoo'
    }
  }
});

非工作示例：

的HTML

<div id="app">
  <child :myVarName="message"></child>
</div>

JS

Vue.component('child', {
  props: ['myVarName'],
  template: `<div>{{ myVarName }}</div>`
});

new Vue({
  el: "#app",
  data() {
    return {
      message: 'hello mr. magoo'
    }
  }
});