问题：VueJS正在某种程度上使用Google CID将呈现过程中的锚标记链接值从存储在数据对象中的值更改为其他值。
背景：我正在使用node和vue-cli构建一个小型应用程序，该应用程序可编译为一个页面应用程序。我正在使用包含HTML，Javascript和CSS / SCSS的单个文件组件来组织我的vue组件。
我不知道vue如何检测Google网址并更改其值。如果检查组件数据，可以看到链接值存储正确，但是在检查HTML时，链接值已转换为CID值。
存储在组件数据中的链接值
页面加载为html后的链接值
在链接上方生成的Vue单个文件组件
<template>
<div class="result">
<div class="restaurant-info">
<div class="restaurant-title">
<h2>{{ result.name }}<span class="km"> • {{ result.distance }} km</span></h2>
</div>
<div class="restaurant-tags" v-if="result.tags.length">
<button class="restaurant-tag" v-for="tag in sortTags(result.tags)">
{{ tag }}
</button>
<google-rating :rating="result.google.rating"></google-rating>
</div>
<table v-if="result.hours">
<tr v-if="google.hours">
<th>Hours:</th>
<td>
<span :class="[{'open': google.open},{'closed': !google.open}]">{{ getOpenHoursStatus() }}</span> <button class="view-all" @click="showHours">view all</button>
</td>
</tr>
<tr class="hours" v-if="google.hours">
<td colspan="2">
<table>
<tr v-for="hour in google.hours"><td>{{ formatGoogleHours(hour, 0) }}</td><td>{{ formatGoogleHours(hour, 1) }}</td></tr>
</table>
</td>
</tr>
<tr>
<th>Happy Hours:</th>
<td>
<span class="example-status">{{ exampleStatus.value }}</span> <button class="view-all" @click="showHours">view all</button>
</td>
</tr>
<tr class="hours">
<td colspan="2">
<table>
<tr v-for="(row, value, index) in exampleHours">
<td>{{ value }}</td>
<td v-for="hours in row">{{ formatTime(hours[0]) }} - {{ formatTime(hours[1]) }}</td>
<td v-if="!row.length">None</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="buttons">
<a target="_blank" :href="result.menus" v-if="result.menus">
<button>Menu</button>
</a>
<a target="_blank" :href="google.website" v-if="google.website">
<button>Website</button>
</a>
<a target="_blank" :href="google.directions" v-if="google.directions">
<button>Directions</button>
}
</a>
</div>
</div>
<div class="map" ref="map"></div>
</div>
</template>
<!-- Javasript -->
<script>
import { store } from '../../main'
import config from '../../config'
import GoogleRating from './GoogleRating.vue'
import moment from 'moment'
import _ from 'lodash'
export default {
data() {
return {
exampleHours: {},
exampleStatus: {
found: false,
day: null,
value: ''
},
google: {
name: null,
website: null,
location: null,
rating: null,
phone: null,
hours: null,
open: null,
map: null,
directions: 'https://www.google.com/maps/dir/' + this.location.lat + ',' + this.location.lng + '/' + encodeURI(this.result.google.address)
}
}
},
props: ['result', 'location'],
mounted() {
console.log("Result", this.result)
console.log("Location", this.location)
console.log("Directions", 'https://www.google.com/maps/dir/' + this.location.lat + ',' + this.location.lng + '/' + encodeURI(this.result.google.address))
if (store.search.day) {
this.exampleStatus.day = store.search.day
} else {
this.exampleStatus.day = moment().isoWeekday()
}
this.$nextTick(() => {
this.showMap()
this.getHappyHours()
this.getHappyHourStatus()
})
},
methods: {
showMap() {
this.google.directions = true
this.map = new google.maps.Map(this.$refs.map, {
center: {lat: this.result.location.latitude, lng: this.result.location.longitude},
zoom: 15,
disableDefaultUI: true,
scrollwheel: false
})
// let infoWindow = new google.maps.InfoWindow()
let service = new google.maps.places.PlacesService(this.map)
service.getDetails({ placeId: this.result.placeId }, (place, status) => {
this.google = Object.assign({}, {
name: place.name,
website: place.website,
directions: place.url,
location: {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
},
rating: place.rating,
phone: place.formatted_phone_number,
open: place.opening_hours.open_now,
hours: place.opening_hours.weekday_text
})
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: this.map,
position: place.geometry.location,
title: place.name,
icon: '//example.com/dist/favicon.png'
})
}
})
},
formatTime(time) {
return moment(time, ['Hmm', 'H']).format('h:mm A')
},
formatDay(day) {
const days = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
return days[day - 1]
},
formatGoogleHours(data, pos) {
return data.split(': ')[pos]
},
getHappyHourStatus() {
const today = this.exampleStatus.day
const now = Number(moment().isoWeekday(today).format('Hmm'))
const hoursArray = this.exampleHours[moment().isoWeekday(today).format('dddd')]
let day = today != moment().isoWeekday() ? moment().isoWeekday(today).format('dddd') : ''
for (let i = 0; i < hoursArray.length; i++) {
const start = Number(hoursArray[i][0])
const endReal = Number(hoursArray[i][1])
let end = Number(hoursArray[i][1])
if ( start > end) {
end += 2400
}
if (!this.exampleStatus.found && !day.length) {
if (now > start && now < end) {
this.exampleStatus.value = 'Ends ' + this.formatTime(endReal)
this.exampleStatus.found = true
return
}
else if (now < start) {
this.exampleStatus.value = 'Starts ' + this.formatTime(start)
this.exampleStatus.found = true
return
}
}
else if (day.length && hoursArray[i].length) {
this.exampleStatus.value = 'Starts ' + day + ' ' + this.formatTime(start)
this.exampleStatus.found = true
return
}
}
if (!this.exampleStatus.found) {
this.exampleStatus.day = moment().isoWeekday(this.exampleStatus.day + 1).isoWeekday()
this.getHappyHourStatus()
}
},
getOpenHoursStatus() {
if (this.google.open) {
return 'Open'
} else {
return 'Closed'
}
},
showHours(event) {
let table = event.target.parentNode.parentNode.nextElementSibling,
style = window.getComputedStyle(table),
display = style.getPropertyValue('display');
if (display == "none") {
table.style.display = "table-row";
} else {
table.style.display = "none";
}
},
getHappyHours() {
let _days = {}
for (let i = 1; i < 8; i++) {
let _day = this.formatDay(i)
_days[_day] = []
for (let x = 0; x < this.result.hours.length; x++) {
if (this.result.hours[x].days.includes(String(i))) {
_days[_day].push([this.result.hours[x].start, this.result.hours[x].end])
}
}
}
this.exampleHours = _days
},
sortTags(tags) {
return _.orderBy(tags, (item) => { return item })
}
},
components: {
GoogleRating
}
}
</script>
<!-- Style -->
<style scoped>
</style>
上面模板中的相关代码
<!-- HTML Template -->
<a target="_blank" :href="google.directions" v-if="google.directions">
<button>Directions</button>
}
</a>
<!-- VueJS / Javascript / Data -->
data() {
return {
exampleHours: {},
exampleStatus: {
found: false,
day: null,
value: ''
},
google: {
name: null,
website: null,
location: null,
rating: null,
phone: null,
hours: null,
open: null,
map: null,
directions: 'https://www.google.com/maps/dir/' + this.location.lat + ',' + this.location.lng + '/' + encodeURI(this.result.google.address)
}
}
}