Алексей Ярков

Два свойства - вводимое пользователем значение и состояние (активность ввода). В зависимости от состояния отображается input или span (v-if / v-else). Как-то так:

<input v-if="input" v-model="name" @keypress.enter="onEnter">
<span v-else v-text="name" @click="onClick"></span>

data: () => ({
  name: '',
  input: true,
}),
methods: {
  onEnter() {
    if (this.name) {
      this.input = false;
    }
  },
  onClick() {
    this.input = true;
  },
},

В точке входа в приложение (main.js или index.js) задай настройки для axios, например:

axios.defaults.headers.common['Accept'] = 'application/json'

А вообще, лучше в документацию глянь, т.к. возможно этот заголовок обязателен для протокола HTTP или отправляется автоматически браузером.

UPD: Вот тут разные варианты https://github.com/axios/axios/issues/382

axios.defaults.headers.common = {};
axios.defaults.headers.common.accept = ‘application/json’;

или

transformRequest: [(data, headers) => {
    delete headers.common['Content-Type']
    return data
}]

arr.map(n => ({
  id: n.id.value,
  title: n.title.value,
  slug: n.slug.value
}))

или

arr.map(n => Object.entries(n).reduce((acc, [ k, v ]) => (acc[k] = v.value, acc), {}))

или

arr.map(n => Object.keys(n).reduce((acc, k) => ({ ...acc, [k]: n[k].value }), {}))

или

arr.map(n => Object.assign({}, ...Object.values(n).map(m => ({ [m.title.toLowerCase()]: m.value }))))

str.replace(/./gm, '*').slice(2) + str.slice(-2)

str
  .slice(-2)
  .padStart(str.length, '*')

Странному коду - странное поведение. Разбираться в причинах которого как-то не очень интересно. Ну не должен getCountrys быть вычисляемым свойством, не должен. Это метод, или, возможно, watcher. Переписывайте код.

'area' это не ноль, не undefined, не null, а значит считается за истину, и операция || срабатывает на первой истине. Тем самым ты сравниваешь свое слово всегда с area.

Тебе надо объединить слова в массив и искать в этом массиве нужное слово.

let tags = ['area', 'base', 'col', 'command'];

if (tags .indexOf(els[i].tagName.toLowerCase()) >= 0) {
  return;
}

Тут производится поиск индекса нужного элемента в массиве, если его нет, то вернется -1, если есть, это значение от 0 до [длинны массива - 1]

У вас сначала выполнится'area' || 'base' || 'col' || 'command', получается у вас всегда проверяется

if (els[i].tagName.toLowerCase() === 'area') { return; }

Чтобы сделать, как вы этого хотите, можно сделать так

const values = ['area', 'base', 'col', 'command'];

if (values.includes(els[i].tagName.toLowerCase())) { 
    return; 
}

А что будет, если завтра он будет использоваться и на другой странице? Придется копировать папку? Я бы так и кидал в components. Но там лучше тоже разделить по дереву, чтобы все не лежало в корне.
Если хочется привязать к странице, то лучше так сделать
src/components/page1/component

Честно говоря, не очень понятно - а зачем тут вообще слоты. Передавайте в компонент данные обычным параметром, на их основе создавайте список.

Но если всё-таки нужно использовать именно слот - пишите собственную render-функцию. Т.е., вместо шаблона, который есть у вас сейчас, будет что-то вроде

export default {
  render(h) {
    return h('ul', this.$slots['list-item'].map(n => h('li', [ n ])));
  },
};

UPD. Если, помимо собственно списка в будущем планируется добавить в компонент List ещё какие-то элементы, то наверное будет не очень удобно рендерить всё это дело через функцию, поэтому можно написать небольшой компонент-обёртку для элементов слота:

components: {
  SlotWrapper: {
    functional: true,
    render: (h, context) => context.props.node,
  },
},

<li v-for="n in $slots['list-item']">
  <slot-wrapper :node="n"></slot-wrapper>
</li>

Найти нужный <script> на странице и распарсить src атрибут

UPDATE: document.currentScript сразу возвращает <script>, в котором он выполняется

https://stackoverflow.com/questions/4716612/how-do...

Думаю, что эта статья должна помочь https://medium.com/@goncalvesjoao/react-es7-decora...