56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
Hello world: {{ title }}
|
||
|
|
|
||
|
|
<div v-for="hit in this.hits" class="mt-3">
|
||
|
|
<div><strong>{{ hit.title }}</strong> ({{ hit.wordcount }} words)</div>
|
||
|
|
<div v-html="hit.snippet"></div>
|
||
|
|
<table v-html="hit.diff"></table>
|
||
|
|
<div>replacement: {{ hit.replacement }}</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import axios from "redaxios";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
title: String,
|
||
|
|
api_base_url: String,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
hits: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
api_call(endpoint, options) {
|
||
|
|
var url = `${this.api_base_url}/${endpoint}`;
|
||
|
|
return axios.get(url, options).catch(this.show_api_error_modal);
|
||
|
|
},
|
||
|
|
add_hit(hit) {
|
||
|
|
var params = { link_from: hit.title, link_to: this.title };
|
||
|
|
this.api_call("valid_hit", { params: params}).then((response) => {
|
||
|
|
if (response.data.valid) {
|
||
|
|
hit.diff = response.data.diff
|
||
|
|
hit.replacement = response.data.replacement
|
||
|
|
this.hits.push(hit);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
var params = { title: this.title }
|
||
|
|
this.api_call("hits", { params: params}).then((response) => {
|
||
|
|
response.data.hits.forEach((hit) => { this.add_hit(hit) });
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|