获取头文件脚本中Vue.js组件设置的cookie变量
[英]Get cookie variable set by Vue.js component in header script
问题描述
In my project, the client wants me to implement Hotjar by placing the Hotjar code in the <head> of the page. 
在我的项目中，客户希望我通过将Hotjar代码放在页面的<head>中来实现Hotjar。
That's simple enough, but they also want the user to control whether or not they will allow themselves to be tracked. 这很简单，但他们也希望用户控制他们是否允许自己被跟踪。
The way this is set up right now is a "cookie settings" page where the user can switch this option on or off: 现在设置的方式是“cookie设置”页面，用户可以在此页面上打开或关闭此选项：
<template>
<form>
<div class="field">
<div class="control">
<div class="public-switch text-right is-success">
<input v-model="performanceConsent" @change="onPerformanceConsentUpdate" type="checkbox" id="performance-cookies">
<label for="performance-cookies" class="toggle-switch"></label>
<small>Performance</small>
</div>
<br>
<p class="caption">These cookies help us to improve the site’s performance. Select these cookies for faster experience and better content recommendations.</p>
</div>
</div>
</form>
</template>
And here we have our Vue code: 在这里我们有我们的Vue代码：
<script>
export default {
data() {
return {
performanceConsent: false,
};
},
methods: {
onPerformanceConsentUpdate() {
this.$cookie.set('cookie-consent-performance', this.performanceConsent ? 'yes' : 'no');
}
},
created() {
this.performanceConsent = 'no' !== this.$cookie.get('cookie-consent-performance');
this.onPerformanceConsentUpdate();
}
}
</script>
Now, my question is, how do I add the condition to the header to only include Hotjar if performanceConsent is true in the Vue component? 现在，我的问题是，如果在Vue组件中performanceConsent为true ，我如何将条件添加到标题中以仅包含Hotjar？
Is this even possible or will I have to send an Ajax request and store these settings in the database somewhere, then get them from there on page load? 这是否可能，或者我是否必须发送Ajax请求并将这些设置存储在某个地方的数据库中，然后在页面加载时从那里获取它们？
2 个解决方案
解决方案1
0 2019-02-25 10:11:49
I think what are you searching for is vue-head 我觉得你在寻找什么是vue-head
What may be i would do as well , that i will try ht v-if I will add a component in the head and then inside that component i will do the logic conditions using v-if 我可以做什么，我会尝试ht v-if我将在head添加一个组件然后在该组件内我将使用v-if执行逻辑条件
something like that , 像这样的东西，
if you don't like
vue-headvue-head
index.html 的index.html
<script>
export default {
name : 'head_component',
template: '<template v-if="performanceConsent"> //import Hotjar </template>',
data() {
return {
performanceConsent: false,
};
},
methods: {
onPerformanceConsentUpdate() {
this.$cookie.set('cookie-consent-performance', this.performanceConsent ? 'yes' : 'no');
}
},
created() {
this.performanceConsent = 'no' !== this.$cookie.get('cookie-consent-performance');
this.onPerformanceConsentUpdate();
}
}
</script>
解决方案2
0 已采纳 2019-02-25 14:36:05
Pretty simple solution for a pretty simple problem. 非常简单的解决方案非常简单的问题。
You don't have to depend on Your Vue component, as the consent is written into cookies. 您不必依赖您的Vue组件，因为同意被写入cookie。 In the documents head You can check if the cookie exists, and if it does and amounts to true You can just append the hotjar script to the head. 在文档头中您可以检查cookie是否存在，如果它存在并且等于true您可以将hotjar脚本附加到头部。
Here's a simple jsfiddle with the implementation 这是一个简单的jsfiddle与实现
https://jsfiddle.net/py0udsnk/ https://jsfiddle.net/py0udsnk/
<head>
<script>
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
<script>
var consent = getCookie('cookie-consent-performance')
if (consent) {
var hotjar = document.createElement('script')
hotjar.src = 'https://hotjar.com/hotjar.js'
document.getElementsByTagName('head')[0].appendChild(hotjar)
}
</script>
</head>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.