标签: vue-component

我有 ：

<span class="badge" id="total">10</span>

如果我使用 jquery ：

$('#total').text()

如果使用 vue.js 2 如何获得它？

我正在尝试使用 Vue.js 构建热图表。

我一直在关注为 jquery 制作的这个很棒的教程。

我想避免使用 jquery，并且一切正常，但是我在最后一步遇到了麻烦 $(this).css({backgroundColor:clr});

如何:style为每个单元格只更改一次？现在，一旦它处于循环的最后一个循环，它显然会更改每个单元格的值v-for。

我想创建一个watcher每次更改颜色数据属性时都会看到并运行一个单独的函数，例如changeColour: function(color) {// change css}但我不知道将它应用于哪个单元格。

到目前为止，我有：

一个基本的 html 表：

<tbody v-for="page in json">
  <tr>
    <td style = 'background-color: #e5e5ff'> 
    {{page.page_path}} </td>
    <td :style="{ 'background-color': sessionColor }">
    {{page.sessions}} </td>
    <td :style="{ 'background-color': exitColor }">
    {{page.exit_rate}} </td>
    <td :style="{ 'background-color': bounceClr }">
    {{page.bounce_rate}} </td>
    <td :style="{ 'background-color': timeClr }">
    {{page.avg_time_on_page}} </td>
  </tr>

一个具有 4 个颜色属性的 Vue 实例，以及一个负责生成 RGB 值的方法。

在这里，我有完整的jsfiddle，唯一缺少的是V-结合 风格的 …

我怎样才能使用单个文件组件调用父级过滤器。下面是我的代码。

应用程序.js

import computed from '../vue/mixins/computed.js';
import filters from '../vue/mixins/filters.js';
import methods from '../vue/mixins/methods.js';

const app = new Vue({
    el: '#app',
    mixins:[
        computed,
        filters,
        methods
    ],
    mounted: function() {

    }
});

家.vue

<template>
    <div class="home-content">
        <h3>{{home | uppercase}}</h3>
    </div>
</template>
<script type="text/javascript">
    export default {
        data: function() {
            return {
                home: 'home'
            }
        },
        mounted: function() {
            this.$parent.$options.methods.makeConsole();
        }
    }
</script>

它在控制台中给我这个警告“无法解析过滤器：大写”

我有一个 Vue 实例。

var myApp = new Vue({
    el: '#my-App',
    data: {
        user: sessionStorage.getItem('user')
    },
    components: {
        'header-component': httpVueLoader('./components/header-component.vue'),
        'footer-component': httpVueLoader('./components/footer-component.vue')
    }
});

和单个文件组件 header-component

<template>
    <li v-if="user !== ''" class="nav-item">
        <a class="nav-link" v-on:click="openProfilePage" href="#">{{user}}</a>
    </li>
</template>

<script>
    module.exports = {
        data: function () {
            return {}
        },
        props: ['user'],
        methods:
            {
                openProfilePage: function () {
                    if (userName !== '') {
                        myApp.page = 'profile';
                        sessionStorage.setItem('page', 'profile');
                        page = 'profile';
                    }
                    else {
                        myApp.page = 'login';
                        sessionStorage.setItem('page', 'login');
                        page = 'login'; …

我的 ajax axios 是这样的：

let formData = new FormData()
formData.append('file', user.avatar)
formData.append('selected_data', JSON.stringify(user))
axios.post('/member/profile/update', 
    formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }
)
.then(response => cb(response))
.catch(error => ecb(error))

我的路线是这样的：

Route::post('update', 'member\UserController@update')->name('member.profile.update');

如果脚本执行，它工作。我成功发送了数据

但是在这里，我想将 post 方法更改为 put 方法。因为这用于更新配置文件

我这样改变：

axios.put(...

和路线：

Route::put('update', ...

我没有成功发送数据。发送的数据为空

我怎么解决这个问题？

更新：

如果我console.log(user)，结果是这样的：

我正在使用 Vuex 模块来说明我的数据。我将数据存储在多个模块中，以保持我的代码库干净整洁。

使用 vuex-map-fields 时，我遇到了使用来自多个模块的数据的情况。似乎没有方法可以做到这一点，或者我做错了。

以下是我当前的代码；我的组件

<template>
    <div class="">
        <input type="text" v-model="no_panels"><br>
        <input type="text" v-model="firstName"><br>
        <router-link to="/step-2">Go to step 2</router-link>
    </div>
</template>

<script>
import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
    getterType: [
        'getKitchenField',
        'getApplicantField',
    ],
    mutationType: 'updateKitchenField',
});

export default {
    computed: {
        ...mapFields(['no_panels', 'firstName', 'lastName'])
    },
}
</script>

我的店铺档案

import kitchen from './kitchen';
import applicant from "./applicant";

export default {
    modules: {
        kitchen: kitchen,
        applicant: applicant
    },
    strict: false
 }

申请人.js

import { …

需要一个简单的快速修复，当 .env 中的 NODE_ENV 不是“生产”时，我想在我的 VueJS 页脚上显示一个“DEVELOPMENT”标签。请帮忙。

<template>
    <footer class="app-footer font-xs" v-if="process.env.NODE_ENV !== 'production'">
        <span>© 2018 <b>PT Test</b>. All Rights Reserved.</span>
        <span class="ml-auto">DEVELOPMENT</span>
    </footer>
    <footer v-else class="app-footer font-xs">
        <span>© 2018 <b>PT Test</b>. All Rights Reserved.</span>
    </footer>
</template>

我的 .env 文件

NODE_ENV=local
TZ=Asia/Jakarta

我有一个如下所示的 vue 组件：

<template>
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true" data-delay="5000">
    <!-- HTML Clipped -->
    <div class="toast-body">{{message}}</div>
  </div>
</template>

<script>
export default {
  props: ['title', 'message']
}
</script>

然后我有一个 eventListener 来监听通过postMessage发送的消息。这确实有效，但我认为 mount 不是做我想做的正确方法。

window.addEventListener('message', e => {
  let toastComp = Vue.extend(Toast)
  let toast = new toastComp({
    propsData: {
      message: 'hello'
    }
  }).$mount('.toast-container')
})

我正在寻找的是 vue 将组件附加到.toast-container元素而不是替换元素。如何才能做到这一点？

我对 Vue 很陌生，我有一个运行着几个不同页面的应用程序。我试图拥有的页面之一是显示在我的主机上的目录中找到的所有图像，并在图像更改时自动重新加载它们（单独的应用程序每 10 秒更新一次这些图像）。我已经能够显示所有图像（虽然只是通过列出它们），但我似乎无法弄清楚如何让图片自动刷新。以下是代码，非常感谢任何帮助。

<template>
  <div id="app" class="media-display">
    <figure class="media-post" v-for="(image, index) in images" v-bind:key="image.id" >
      <img :key="index" :src="getImage(index)" v-bind:alt="image" width="580" height="390" v-bind:key="index" />
    </figure>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  el: '#app',
  data(){
    return {
      images: [
        '/charts/chart1.png?rnd='+Math.random(),
        '/charts/chart2.png?rnd='+Math.random(),
        '/charts/chart3.png?rnd='+Math.random(),
      ],
      id : 1,
    }
  },
  methods: {
    getImage(index) {
      return this.images[index]
    }
  }
}
</script>

<style>
.media-post {
  display: inline-block;
  padding: 1vmin;
  //border-radius: 2vmin;
  box-shadow: 0 10px 5px rgba(0, 0, 0, 0.2);
  margin: …

几天以来我一直有这个问题，我真的在互联网上找不到任何解决方案。

我是 Vue.js 的新手

我正在做一个 TDD laravel 项目：

现在我想像这样将标准的 vue 示例组件添加到我的 app.blade.php 中：

应用程序.blade.php

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

<body>
<div id="app">
    <example-component></example-component>
</div>

应用程序.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});

结果，示例组件在网页上呈现......没问题......

但问题来了：

一旦我更改了示例组件中的任何 HTML 代码，它就不会在浏览器中显示更改。它不断显示标准示例组件。

甚至更糟：

当我通过重构为 FlashTest.vue（例如或其他任何东西）并像这样更改 app.layout.blade 和 app.js 来重命名 examplecomponent.vue 文件时：

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

<body>
<div id="app">
    <flash-test></flash-test>
</div>

应用程序.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('flash-test', require('./components/FlashTest.vue').default);

const app = new …