标签: vue-component

我正在为我的 vuejs 项目（vuejs：版本 2）使用 webpack 模板。我想知道如何使我的内容转义（除了v-html）：

请注意，message包含一些<a>标签，如 : These is my website <a href="https://google.com">link</a>。

就像在车把中一样，我想使用类似的东西：

<p>{{{ message }}}</p>和<p>{{{ message | customFilter }}}</p>。

我已经尝试了第一个选项，但它不起作用。有没有办法让它与三重胡须一起工作？

我有两个输入存储来自谷歌地图脚本的 lat 和 lng，如果用户更改标记的位置 => 这两个输入获取用户啄的 lat 和 lng，所以我想获取这两个输入的值，我试过 v -model 但它不起作用我实际上注意到只有当我通过键入或粘贴某些内容来更改这些输入的值时才会触发 v-model。有没有办法获得这些输入的值（例如-更改）到我的 Vue 实例？

我正在使用 Vue Router，我需要使用router.beforeEach回调来确定是否命中了某个路由。唯一的问题是，当使用回调时，<router-view></router-view>不会呈现任何内容。

app.vue

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

<script>
    import navComponent from './nav'
        export default {
            components: {
                navComponent
            }
        }
</script>

routes.js

import VueRouter from 'vue-router';

export default new VueRouter({

    routes: [
        {
            path: '/',
            component: require('./views/home')
        },
        {
            path: '/logout'
        }
    ],

    linkActiveClass: 'is-active'
});

app.js

import './bootstrap';
import router from './routes';
import app from './views/app';

router.beforeEach((to, from, next) => {  //if this callback was commented out the <router-view></router-view> would render …

我有这个模板：

<template>
<div>
    <div v-for="report in reports">
        <div class="map" v-bind:id="mapID = report.started.toUpperCase()" v-text="report.started">
        {{hello(mapID)}}

    </div>
    </div>
</div>

和这个模型：

<script>
import addmap from '../components/addmap';
export default {

    data: function(){
        return {
            reports: [],
            mapid: "",
            map_id: ''
        }
    },

    mounted: function(){
        this.mapID = this.map_id;
        this.allReport()    
    },

    components: {
        'addmap': addmap
    },

    computed: {
        mapID: {
            get: function(){
                return this.map_id;
            },

            set: function(newValue){
                this.map_id = newValue.toUpperCase();
            }
        }   
    },

    methods: {
        hello: function(val){
            console.log(val)    
        },
        allReport: function(){
            axios.get('/reports').then(response => {
                this.reports = …

如何使用 vue-resource 完成以下任务：

1. 从服务器获取数据时包括预加载器文本 Loading... 或 gif 图像。
2. 在表单提交上显示成功消息。

我的 vue 组件是这样的：

<template>
    <div>
        ...
            <li v-for="category in categories">
                ...
                    <input type="radio" class="category-radio" :value="category.id" (category.id == categoryId) ? 'checked data-waschecked=true' : ''> 
                ...
            </li>
        ...
    </div>
</template>
<script>
    export default {
        props: ['categories', 'categoryId'],
    }
</script>

我想在输入类型文本中添加条件。我使用运算符三元像上面的代码

如果代码被执行，它不起作用

没有错误。所以我很困惑要解决它

也许我的代码仍然不正确

我该如何解决？

我得到的值undefined当我尝试访问this.perMonth从fnTwo()和fnThree()，但在工作fnOne()。我可以运行一个函数，data(){}并且可以返回一些值，但不能返回data(){}例如。this.perMonth（检查fnThree()）

Vue.component('BuySubscription', {
  template: '#buy-subscription',
  data() {
    return {
      perMonth: 19,
      valFromFnTwo: this.fnTwo(),
      valFromFnThree: this.fnThree()
    }
  },
  methods: {
    fnOne() {
      console.log("from fnOne: get data > perMonth: " + this.perMonth);
      return this.perMonth
    },
    fnTwo() {
      console.log("from fnTwo: get data > perMonth : " + this.perMonth);
      return this.perMonth
    },
    fnThree() {
      console.log("from fnThree: get data > perMonth " + this.perMonth);
      console.log("from fnThree: get …

这是我的 VueJs 组件：

<template>
  <div>
    <gmap-map ref="map" :center="center" @click="captureClickedLocation" :zoom="10">
    </gmap-map>
  </div>
</template> 

例如，如何在此处获取对当前地图对象的引用，以便将其与 agoogle.maps.drawing.DrawingManager一起使用以显示自定义叠加层？

示例代码是这样的

var drawingManager = new google.maps.drawing.DrawingManager({
                        drawingMode: google.maps.drawing.OverlayType.MARKER,
                        drawingControl: true,
                        drawingControlOptions: {
                            position: google.maps.ControlPosition.TOP_CENTER,
                            drawingModes: [
                                google.maps.drawing.OverlayType.CIRCLE,
                                google.maps.drawing.OverlayType.POLYGON,
                                google.maps.drawing.OverlayType.RECTANGLE
                            ]
                        },
                        markerOptions: {
                            icon: 'images/beachflag.png'
                        });
drawingManager.setMap(map); 

如何获取对gmap-map的地图对象的引用？或者，最后一行中map的值是多少？

PS：我使用VUE，谷歌地图从https://github.com/xkjyeah/vue-google-maps，这是谷歌地图VUE包装。

我无法理解道具在VueJS中的工作方式,我们将非常感谢一些帮助.这是一个简单的谷歌地图组件,我希望在页面上显示并动态传递div的id元素作为底层模板的道具.

html文件 -

<div id="app">
    <google-map name="map"></google-map>
</div>

vue文件 -

<template>
    <div :id="mapName"></div>
</template>

<script>
module.exports = {
    name: 'google-map',
    props: [ 'name' ],
    data: () => {
        console.log(this.name); // ERROR: name is undefined
        return {
            mapName: this.name
        };
    },
    mounted: () => {
        const map = new google.maps.Map(document.getElementById(this.mapName), {
            zoom: 14,
            center: new google.maps.LatLng(39.305, -76.617)
        });
    }
}
</script>

<style scoped>
#map {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background: gray;
}
</style>

我得到的错误是this.name在组件对象的data()方法中未定义.

我正在尝试创建有关照片列表的示例，并且在调用API之后将数据绑定到组件时遇到麻烦。

JS代码：

<script>
// photo item
Vue.component('photo-item', {
   props: ['photo'],
   template: `<li>{{ photo.name }}</li>`
});

// List of photos
Vue.component('photo-list', {
   props: ['photos'],

   template: `
   <ul id="photo-list">
      <photo-item v-for="photo in photos" :photo="photo"></photo-item>
   </ul>`
});

new Vue({
   el: "#photo_detail",
   data: {
      photos: []
   },

   created: function() {
      axios
       .get('/api/photos')
       .then(function (response) {
           this.photos = response.data; // Data existed
       })
       .catch(function (err) {
           console.log(err);
       });
   }
 })
 </script>

HTML代码

<main id="photo_detail">
    <photo-list v-for="photo in photos" :photo="photo"></photo-list>
</main>

从API获取所有照片后，据我了解，该变量photos将自动绑定，而VueJS将更新DOM。

VueJs 2.1.6 …