标签: vue-component

参考下面的链接，我们可以使用以TypeScript编写的基于类的vue组件。
使用这些自定义组件的正确方法是什么？

例如，下面的Es5代码定义了一个可以在其他组件模板中使用的组件，例如，<my-component></my-component>因为我们将名称'my-component'作为Vue.component方法的参数。 如何在打字稿中实现这一点？

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

Vue.component('parent-component', {
  template: '<my-component></my-component>'
})

https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components https://alligator.io/vuejs/typescript-class-components/

基于类的Vue组件 可以在其他组件的模板字符串中使用的该组件的标记名是什么？

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: …

我有一个元素div与属性contenteditable ="true".这个div的行为类似于textarea元素.

<div v-on:keyup.enter="SendMensage" v-html="msg" contenteditable="true"></div>

我的代码:

data() {
     return {
        msg: '',
     }
},

methods: {
     enviaMensagem() {

        console.log(this.msg);

     }
}

我的问题是数据绑定不起作用.div中输入的内容不反映变量.有谁知道它能是什么？

所以我试图制作使用输入html属性'pattern'的html表单,但是当我通过Vue.js组件这样做时,它会创建非常奇怪的行为.这是一个小提琴演示.

Vue.component('test', {
template:`<input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}"
title="Must contain at least one number and one uppercase and lowercase letter, and be between 8 and 16 characters."/>`
})

jsfiddle演示

这里的模式正则表达式的细分(regex101示例).

现在,对于我的生活,我无法弄清楚为什么正常版本正确验证,但Vue版本没有.

我有一个子组件，它在创建的函数中发出事件

created: function(){
    this.$emit('onPageTitleChange', this.pageTitle);

    this.updateList()
}

我在#app div中有这个（我正在向vue实例发起攻击）：

<h2 class="no-margin-bottom" v-on:onPageTitleChange="updatePageTitle">{{ pageTitle }}</h2>

并且vue应用程序（父应用程序）的upatePageTitle定义为：

methods: {
    updatePageTitle(title){
        this.pageTitle = title;
    }
},

页面标题没有更改-我缺少什么？

我对VueJs不熟悉,所以记住这一点.

我有这样的单一模板组件

 <template>
    <div class="testing-container">
        <button v-on:click="toggleContainer" class="btn btn-success btn-sm show-testing-container">Testing <i v-if="!show" class="fa fa-chevron-up"></i><i v-if="show" class="fa fa-chevron-down"></i></button>
        <div v-if="show" class="testing-frame">
            <vue-tabs active-tab-color="#e74c3c"
                      active-text-color="white"
                      type="pills"
                      :start-index="1"
                      direction="vertical"
            >
                <v-tab title="First tab" icon="ti-user">
                    First Tab
                </v-tab>

                <v-tab title="Second tab" icon="ti-settings">
                    Second tab content
                </v-tab>

                <v-tab title="Third tab" icon="ti-check">
                    Third tab content
                </v-tab>
            </vue-tabs>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show: false,
            };
        },
        created() {
        },
        methods: {
            toggleContainer() {
                if(this.show){
                    this.show = false;
                }else{
                    this.show …

我的Vue组件上传文件图像是这样的：

<template>
    <section>
        <ul class="media-list">
            ...
        </ul>
    </section>
</template>

<script>
    export default {
        ...
        props: ['productId'],
        methods: {
            ...
            onFileChange(e, index) {
                let files = e.target.files,
                let formData = new FormData()
                formData.append('file', files[0])
                axios.post(window.App.baseUrl+'/admin/product/upload-image',
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                ).then(function(){
                    console.log('SUCCESS!!')
                })
                .catch(function(){
                    console.log('FAILURE!!')
                });
            }
        }
    }
</script>

因此，如果用户上传文件图像，它将调用onFileChange方法

我的路线是这样的：

Route::prefix('admin')->group(function(){
    Route::prefix('product')->group(function(){
        Route::post('upload-image', 'Admin\ProductController@uploadImage')->name('admin.product.upload-image');
    });
});

我的控制器是这样的：

public function uploadImage(Request $request)
{
    echo '<pre>';print_r($request->all());echo '</pre>';die();
}

该代码有效。我成功将文件上传到控制器中

但是在这里我也想通过另一个参数。我想传递参数productId

我尝试像这样更改代码axios：

...
axios.post(window.App.baseUrl+'/admin/product/upload-image',
{product_id: this.productId, formData}
...

这是行不通的。结果为空 …

我正在开发考试门户应用程序。

这是我的代码。

<div class="" v-for="areas in knowledgeAreas">
        {{areas.area}}<div class="progress"  style="margin-top:10px;">
          <div class="progress-bar"  style="width:50%">{{areas.correctlyMarkedAnswers}} out of {{areas.numberOfQuestion}}</div>
        </div>

      </div>

和

data(){
    return{
      knowledgeAreas :[
        { area: 'Math',numberOfQuestion:10,correctlyMarkedAnswers:3,correctAnswersPercentage:12 },
        { area: 'IQ',numberOfQuestion:10,correctlyMarkedAnswers:5,correctAnswersPercentage:5 },
        { area: 'GK',numberOfQuestion:10,correctlyMarkedAnswers:8,correctAnswersPercentage:3 }
      ]
    }
  }

我想要的是将correctAnswersPercentage属性的值动态传递给CSS width属性。

我正在使用Vue和Vuex构建一个简单的电影应用程序，并且希望能够在单击按钮时将电影添加到收藏夹列表中。我正在将电影添加到商店中，但是添加电影后，我希望按钮上的文本从“添加到收藏夹”更改为“从收藏夹删除”。我正在使用计算属性读取Vuex商店，以根据电影是否在商店的收藏夹列表中来确定按钮上的文本。如果我重新加载页面，则按钮上的文本会正确更改，但是仅单击按钮添加/删除电影时我无法更改文本。如何在Vuex存储中的更改中重新获得计算的属性？

这是我的电影组件：

<template>
  <div class="single-movie-page">
    <img class="movie-img" :src="movie.img"></img>
    <div class="single-movie-info">
      <h1>{{movie.title}}</h1>
      <h3>Rating: {{movie.stars}}</h3>
      <h3>Released Date: {{movie.releaseDate}}</h3>
      <p>{{movie.overview}}</p>
      <button v-on:click="addRemoveFavourites" >{{ favourite }}</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['movie'],
  computed: {
    favourite() {
      return this.$store.state.favourites[this.movie.id] === undefined
        ? 'Add to Favourites'
        : 'Remove from Favourites'
    }
  },
  methods: {
    addRemoveFavourites() {
      this.$store.commit('changeFavourites', this.movie)
    }
  }
}
</script>

这是我的Vuex商店：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    favourites: {}
  }, …

我正在尝试将动态路径传递给vue-router，但似乎无法为其提供正确的语法。这是我正在尝试的。

<li v-on:click="$emit('closeDropdown')"><router-link to="item.route" id="button">{{ item.title }}</router-link></li>

仅将其包装在引号中是不够的，因为这是我检查元素时看到的：href="#/item.route"对于所有项目。

父母组成

<UserDropdownList v-for="item in userDropdownItems" v-bind:item="item"></UserDropdownList>

 data: function () {
  return {
    userDropdownItems: [
      { title: 'Profile', route: "/profile" },
      { title: 'Users', route: "/users" }
    ]
   }
 }

如何访问Router-linkto属性的route 属性？

我有以下问题.

我正在声明数据,我想在之前,当前和之后设置.

data () {
  return {
    notes: {
      ...
    },
    view: {
      dayCurrent: new Date(),
      dayBefore: new Date().setDate(this.view.dayCurrent.getDate() - 1),
      dayAfter: new Date().setDate(this.view.dayCurrent.getDate() + 1)
    }
  }
}

但是一旦我保存了这个,我就会得到以下错误

data()中的错误:"TypeError:无法读取未定义的属性'dayCurrent'",就好像我的视图对象不存在一样.

为什么是这样？如何设置此并避免此类错误.