我试图完成我的第一个vue.js迷你应用程序，现在我遇到了IE11无效的问题。
不确定如何/如何使其有效。我试过polyfill，但不确定我是否正确使用它...帮助真的很感激，伙计们！
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Selbsttest</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row row justify-content-sm-center mt-5">
<div class="col-md-10">
<div id="app">
<div v-if="step === 0">
<div class="row row-eq-height selftest">
<div class="col-lg-5 col-md-12 col-sm-12 col-12 q-image" style="background-image:url(img/start.jpg)">
<div class="imagecred">Foto: Demo AG/Corbis Images</div>
</div>
<div class="col-lg-7 col-md-12">
<h2 class="pt-4">Wie achtsam gehen Sie mit Ihrem Kind um?</h2>
<p>Intro</p>
<br />
<button @click.prevent="next()" class="btn btn-info">Test starten</button>
</div>
</div>
</div>
<div class="" v-for="(q, key) in questions" :value="key">
<div v-if="step === q.id">
<div class="row row-eq-height selftest">
<div class="col-lg-5 col-md-12 col-sm-12 col-12 q-image" :style="{ backgroundImage: 'url(' + q.image + ')' }">
<div class="imagecred">Foto: {{ q.imagecred }} </div>
</div>
<div class="col-lg-7 col-md-12 p-0">
<!--<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>-->
<div class=" pr-4 pb-4 pl-4 h-100">
<span class="q-number mt-4 mb-2">Frage {{ q.id }} / 10</span>
<span class="q-title mb-4">{{q.title}}</span>
<div class="form-check" v-for="answer in q.answers">
<input class="form-check-input" type="radio" v-bind:id="answer.answer" v-bind:value="answer" v-model="q.selectedAnswer">
<label class="form-check-label" v-bind:for="answer.answer">
{{answer.answer}}
</label>
</div>
<div style="text-align: right;" class="mt-4 control-buttons">
<button @click.prevent="prev()" class="btn btn-outline-success">zurück</button>
<button @click.prevent="next()" class="btn btn-success">weiter</button>
<!-- <button @click.prevent="submit()">Save</button>-->
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="step === 3">
<div class="row row-eq-height selftest">
<div v-if="total <= 29" class="col-lg-5 col-md-12 col-sm-12 q-image" style="background-image: url('img/beobachtend.jpg');">
<div class="imagecred">Foto: Demo AG/Fotolia </div>
</div>
<div v-if="total >= 30 && total <= 44" class="col-lg-5 col-md-12 col-sm-12 q-image" style="background-image: url('img/achtsam.jpg');">
<div class="imagecred">Foto: Demo AG/Fotolia </div>
</div>
<div v-if="total >= 45" class="col-lg-5 col-md-12 col-sm-12 q-image" style="background-image: url('img/fuersorglich.jpg');">
<div class="imagecred">Foto: Demo AG/Fotolia </div>
</div>
<div class="col-lg-7 col-md-12 p-0">
<div class=" pr-4 pb-4 pl-4">
<p>
!!!Nur fürTest !! Total points: {{total}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
step: 0,
questions: [
{
id: 1,
image: 'img/q1.jpg',
imagecred: 'Demo AG/Getty Images',
title: 'Wie sieht eine gemeinsame Mahlzeit bei Ihnen in der Familie aus?',
answers: [{
id: 1,
answer: 'Wir versuchen möglichst oft gemeinsam zu essen. Smartphones und Spielkonsolen haben dann Pause.',
points: 3
},
{
id: 2,
answer: 'Unsere Zeitpläne sind leider so verschieden, dass wir es nicht schaffen gemeinsam zu essen.',
points: 1
},
{
id: 3,
answer: 'Wir haben feste Zeiten für unser gemeinsames Essen. Jeder erzählt dann von seinem Tag.',
points: 6
}
],
selectedAnswer: ''
}, {
id: 2,
image: 'img/q2.jpg',
imagecred: 'Demo AG/Corbis Images',
title: 'Ihr Kind ist seit klein auf in einem Schwimmverein und hat schon einige Wettkämpfe gewonnen. Sie haben erfahren, dass das Kind in letzter Zeit mehrfach das Training geschwänzt hat, um mit Freunden Fußball zu spielen. Was tun Sie?',
answers: [{
id: 1,
answer: 'Ich spreche mit meinem Kind über sein Verhalten und erkläre ihm, dass es wichtig ist, diszipliniert an seinen Talenten zu arbeiten.',
points: 6
},
{
id: 2,
answer: 'Schwimmen scheint ihm keinen Spaß mehr zu machen. Ich melde es vom Training ab.',
points: 1
},
{
id: 3,
answer: 'Ich frage mein Kind, warum es nicht mehr zum Schwimmtraining gehen mag. Vielleicht hat das Schwänzen keinen sportlichen Hintergrund, sondern persönliche Hintergründe wie z.B. einen Streit. Wenn es wirklich lieber Fußball spielen will, ist das aber auch in Ordnung. ',
points: 3
}
],
selectedAnswer: ''
}],
selected: []
},
computed: {
total() {
let points = 0;
this.questions.forEach(q => {
points += q.selectedAnswer ? q.selectedAnswer.points : 0;
});
return points;
}
},
methods: {
showAnswer(selectedAnswer) {
if (selectedAnswer) {
return 'Selected: ' + selectedAnswer.answer + ', points: ' + selectedAnswer
.points
}
return '';
},
prev() {
this.step--;
},
next() {
this.step++;
},
submit() {
alert('Submit to blah and show blah and etc.');
}
}
});
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
这是一个包含几个步骤和评级功能的测试。