Я пытаюсь завершить свое самое первое мини-приложение 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>
Это тест с несколькими шагами и функцией оценки.